Bootstrap テーブル見出しの中央配置

Bootstrapにおける、テーブル見出しは「左上配置」になり、bootstrapを使う意味がないような気になります。
縦・横中央揃えを指定できるようなクラスも無いようで・・・
rowspanやcolspanでセルを結合した場合は、下の画像の通り、特にひどい状態になります。

縦・横中央に配置するには、CSSで強制的に配置してやらないとダメなようなので、
Firebugで要素を調査したところ、次のように設定すると改善できるようです。

.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > th {
  vertical-align: middle;
  text-align: center;
}

結果は、以下の通りになりました。

なお、cssのセレクタでお分かりのように、tableタグはbootstrapの指定に従い次のclassを指定してください。

<!-- table-borderedは任意です -->
<table class="table table-bordered">

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


This blog is kept spam free by WP-SpamFree.