Bootstrapの表（テーブル）の使い方７選

Bootstrapでのテーブル作成する際のメモを忘備録としてポストします。

Bootstrapで表・Tableを作る方法

デモ

1. 基本

class を "table" とすれば Bootstrap 仕様となる。
thead、tbodyタグは省略できないらしい。

[html]

見出し1	見出し2	見出し3
データ1	データ2	データ3
データ4	データ5	データ6

[/html]

2. ストライプ

"table-striped" クラスで薄いグレーでストライプになる。
色がつくのは、tbody タグの一番最初から、とのこと。

[html]

見出し1	見出し2	見出し3
データ1	データ2	データ3
データ4	データ5	データ6

[/html]

3. ボーダー(縦線)を付ける

"table-bordered" クラスで薄いグレーの縦ボーダーが入る。

[html]

見出し1	見出し2	見出し3
データ1	データ2	データ3
データ4	データ5	データ6

[/html]

4. マウスオーバーで背景色

"table-hover" クラスで、マウスオーバーした時にセルに背景色が付く。

[html]

見出し1	見出し2	見出し3
データ1	データ2	データ3
データ4	データ5	データ6

[/html]

5. padding を半分にする

"table-condensed" クラスで、セルにかかっている padding 値が半分になる。

[html]

見出し1	見出し2	見出し3
データ1	データ2	データ3
データ4	データ5	データ6

[/html]

6. セルに既定の背景色をつける

セルに任意の色を付ける。
<tr> タグにつけると、その列全て、 <td> タグはそのセルだけとなる。

各クラス名は以下となる。

.default

なし

.active

マウスオーバーした時と同様の色

.success

うすい緑

.info

うすい青

.warning

うすい黄色

.danger

うすい赤

[html]

見出し1	見出し2	見出し3
default	データ2	データ3
active	データ5	データ6
success	データ8	データ9
info	データ11	データ12
warning	データ14	データ15
danger	データ17	データ18
td	success	warning

[/html]

7. レスポンシブ仕様

ブラウザ横幅が 768px より小さくなった場合、"table-responsive" クラスの div 等で括ったテーブルにスクロールバーを表示させる。

[html]

[/html]

デモ

-Bootstrap
-bootstrap, table, WEB制作