2015/06/21  Bootstrap 

Bootstrapの <table> には標準クラスで用意されているものがあるのでまとめてみました。

基本

table

<table> に基本クラス .table を付けるとベースの表が表示されます。

# 見出し1 見出し2 見出し3
1 項目1 項目2 項目3
2 項目4 項目5 項目6
3 項目7 項目8 項目9
<table class="table">
  ...
</table>

ボーダー

table-bordered

.table-bordered を付けるとテーブルとセルの全ての横にラインが表示されます。

# 見出し1 見出し2 見出し3
1 項目1 項目2 項目3
項目4 項目5 項目6
2 項目7 項目8 項目9
3 項目10 項目11
<table class="table table-bordered">
  ...
</table>

マウスオーバーで背景色の変更

table-hover

.table-hover を付けると<tbody> の中のテーブル行をマウスオーバーすると背景色が変わるようになります。

# 見出し1 見出し2 見出し3
1 項目1 項目2 項目3
2 項目4 項目5 項目6
3 項目7 項目8
<table class="table table-hover">
  ...
</table>

ストライプ

table-striped

.table-striped を付けると<tbody> の中のテーブル行が交互に色付きます。

クロスブラウザの互換性

:nth-child を通してスタイルされているので、IE8 では利用できません。

# 見出し1 見出し2 見出し3
1 項目1 項目2 項目3
2 項目4 項目5 項目6
3 項目7 項目8 項目9
<table class="table table-striped">
  ...
</table>

テーブル(小)

table-condensed

.table-condensedを付けると行間の狭いテーブルになります。

# 見出し1 見出し2 見出し3
1 項目1 項目2 項目3
2 項目4 項目5 項目6
3 項目7 項目8 項目9

<table class="table table-condensed">
  ...
</table>

背景色の変更

テーブルの行<tr>やセル<th> <td>に色をつけることができます。

クラス 説明
.active
.success 成功
.info 情報
.warning 注意、警告
.danger 危険、エラー
# 見出し1 見出し2 見出し3
1 項目1 項目2 項目3
2 項目4 項目5 項目6
3 項目7 項目8 項目9
4 項目10 項目11 項目12
5 項目13 項目14 項目15
6 項目16 項目17 項目18
7 項目19 項目20 項目21
8 項目22 項目23 項目24
9 項目25 項目26 項目27
<!-- tr 行 -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- td,th セル-->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

レスポンシブなテーブル

table-responsive

.table.table-responsiveで囲うとレスポンシブなテーブルを作ることができます。768px未満になるとスクロールが表示されます。

# 見出し1 見出し2 見出し3 見出し4 見出し5 見出し6
1 項目1 項目2 項目3 項目4 項目5 項目6
2 項目7 項目8 項目9 項目10 項目11 項目12
3 項目13 項目14 項目15 項目16 項目17 項目18
# 見出し1 見出し2 見出し3 見出し4 見出し5 見出し6
1 項目1 項目2 項目3 項目4 項目5 項目6
2 項目7 項目8 項目9 項目10 項目11 項目12
3 項目13 項目14 項目15 項目16 項目17 項目18

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>