Bootstrapのtable設定・使い方

概略

BootstrapのTableの使い方を「コードサンプル」と「表示例」を使って出来るだけわかりやすく、直感的に使えるように説明しています。「コードサンプル」をそのままコピーして利用していただけます。

HTML5のテーブル(table)基本

thead・tbody・tfootタグは省略して記載してもかまいません。

※HTML5表示サンプル

カラム名①カラム名②カラム名③
データ①データ②データ③
補足①補足②補足③

Bootstrapの場合のテーブル(table)基本形

tableタグにclass属性「table」を追加してください。

ただし、Bootstrapを使う意義として、レスポンシブ対応が欠かせないので、次項の「div class=”table-responsive”」と共に使うことを推奨します。

※Bootstrapの場合のテーブル基本形の表示サンプル

カラム名①カラム名②カラム名③
データ①データ②データ③
データ④データ⑤データ⑥
補足①補足②補足③

レスポンシブデザイン対応設定(スマホやパソコンで最適表示)

tableタグ全体を「div class=”table-responsive”」で包んでください。

※table-responsiveの表示サンプル

カラム名①カラム名②カラム名③
データ①データ②データ③
データ④データ⑤データ⑥
補足①補足②補足③

1行ごとにセルの背景色が変更する。

tableタグにclass属性「table-striped」を追加してください。

※table-stripedの表示サンプル

カラム名①カラム名②カラム名③
データ①データ②データ③
データ④データ⑤データ⑥
データ⑦データ⑧データ⑨

テーブルに枠線を追加

tableタグにclass属性「table-bordered」を追加してください。

※table-borderedの表示サンプル

カラム名①カラム名②カラム名③
データ①データ②データ③
データ④データ⑤データ⑥
データ⑦データ⑧データ⑨

マウスオーバーされているセルの色を変更する

tableのclass属性に「table-hover」を追加してください。

※table-hoverの表示サンプル

カラム名①カラム名②カラム名③
データ①データ②データ③
データ④データ⑤データ⑥
データ⑦データ⑧データ⑨

セルのパディングをなくし、コンパクトに表示する。

tableのclass属性に「table-condensed」を追加してください。

※table-hoverの表示サンプル

カラム名①カラム名②カラム名③
データ①データ②データ③
データ④データ⑤データ⑥
データ⑦データ⑧データ⑨

パネル機能を使ってテーブルに題名をつける

「div class=”panel panel-default”」で包んで、「div class=”panel-heading」に題名を追記してください。

※テーブルに題名をつけたサンプル

テーブルの題名
カラム名①カラム名②カラム名③
データ①データ②データ③
データ④データ⑤データ⑥
データ⑦データ⑧データ⑨
パネルの色も変更できます!

panel-defaultのdefaultの部分を変更してください。例えば、青色にしたい場合は、「panel-primary」に変更してください。
参考→「primary(青),success(緑),info(水色),worning(黄),danger(赤)」

panel-primary
カラム名①カラム名②カラム名③
データ①データ②データ③
データ④データ⑤データ⑥
データ⑦データ⑧データ⑨
panel-success
カラム名①カラム名②カラム名③
データ①データ②データ③
データ④データ⑤データ⑥
データ⑦データ⑧データ⑨

追記:左カラムにthを設定した場合のソースは以下

thが左にくる設定
カラム名①データ①データ②
カラム名②データ③データ④