Bootstrap3に用意されているクラス【table編】

2015年6月21日2023年9月30日

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

基本

table

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

#	見出し１	見出し２	見出し３
1	項目１	項目２	項目３
2	項目４	項目５	項目６
3	項目７	項目８	項目９

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

ボーダー（ラインの表示）

table-bordered

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

#	見出し１	見出し２	見出し３
1	項目１	項目２	項目３
1	項目４	項目５	項目６
2	項目７	項目８	項目９
3	項目１０		項目１１

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

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

table-hover

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

#	見出し１	見出し２	見出し３
1	項目１	項目２	項目３
2	項目４	項目５	項目６
3	項目７		項目８

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

ストライプ（背景色のしましま）

table-striped

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

#	見出し１	見出し２	見出し３
1	項目１	項目２	項目３
2	項目４	項目５	項目６
3	項目７	項目８	項目９

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

テーブル（小）

table-condensed

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

#	見出し１	見出し２	見出し３
1	項目１	項目２	項目３
2	項目４	項目５	項目６
3	項目７	項目８	項目９

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

背景色の変更

.active .success .info .warning .danger

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

クラス	説明
`.active`
`.success`	成功
`.info`	情報
`.warning`	注意、警告
`.danger`	危険、エラー

#	見出し1	見出し2	見出し3
1	項目１	項目２	項目３
2	項目４	項目５	項目６
3	項目７	項目８	項目９
4	項目１０	項目１１	項目１２
5	項目１３	項目１４	項目１５
6	項目１６	項目１７	項目１８
7	項目１９	項目２０	項目２１
8	項目２２	項目２３	項目２４
9	項目２５	項目２６	項目２７

<!-- 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	項目１３	項目１４	項目１５	項目１６	項目１７	項目１８

#	見出し１	見出し２	見出し３	見出し４	見出し５	見出し６
1	項目１	項目２	項目３	項目４	項目５	項目６
2	項目７	項目８	項目９	項目１０	項目１１	項目１２
3	項目１３	項目１４	項目１５	項目１６	項目１７	項目１８

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

URLをコピーしました！