今回は、Bootstrapにおけるテーブルのスタイリングについて紹介します(^^)
テーブルの基本スタイリング
Bootstrapでは、table 要素に table クラスを追加してから、様々なクラスをつけ加えてバリエーションを拡張することができます。
まずは、table クラスを追加しただけの、最も基本となるスタイリングを確認します。
<p>デフォルトのテーブル</p>
<table>
<thead>
<tr>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">見出し</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<th scope="row">見出し</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<th scope="row">見出し</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
</tbody>
</table>
<p>Bootstrapのスタイルのテーブル</p>
<table class="table">
<thead>
<tr>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">見出し</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<th scope="row">見出し</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<th scope="row">見出し</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
</tbody>
</table>
table クラスを追加しただけで、いい感じに見た目が整っていますね。
ちなみに scope 属性は、行または列の見出しセルであることを示し、Bootstrap特有のものではなくHTMLの仕様です。
暗色テーブル
table クラスが設定されている table 要素に table-dark クラスを追加することで、テーブルの明暗を反転させることができます。
<table class="table table-dark">
<thead>
<tr>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">見出し</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<th scope="row">見出し</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<th scope="row">見出し</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
</tbody>
</table>
テーブルヘッドの色分け
thead 要素に thead-dark クラス、thead-lightクラスをつけることで、thead 要素の色を変更することができます。
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">見出し</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<th scope="row">見出し</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<th scope="row">見出し</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
</tbody>
</table>
<table class="table">
<thead class="thead-light">
<tr>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">見出し</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<th scope="row">見出し</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<th scope="row">見出し</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
</tbody>
</table>
ストライプテーブル
table クラスが設定されている table 要素に table-stripedクラスを追加することで、テーブルを縞模様にすることができます。
<table class="table table-striped">
<thead>
<tr>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">見出し</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<th scope="row">見出し</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<th scope="row">見出し</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
</tbody>
</table>
<table class="table table-dark table-striped">
<thead>
<tr>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">見出し</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<th scope="row">見出し</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<th scope="row">見出し</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
</tbody>
</table>
罫線付きテーブル
table クラスが設定されている table 要素に table-borderedクラスを追加することで、テーブルを縞模様にすることができます。
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">見出し</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<th scope="row">見出し</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<th scope="row">見出し</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
</tbody>
</table>
<table class="table table-dark table-bordered">
<thead>
<tr>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">見出し</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<th scope="row">見出し</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<th scope="row">見出し</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
</tbody>
</table>
罫線なしのテーブル
table クラスが設定されている table 要素に table-borderlessクラスを追加することで、テーブルを罫線なしにすることができます。
<table class="table table-borderless">
<thead>
<tr>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">見出し</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<th scope="row">見出し</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<th scope="row">見出し</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
</tbody>
</table>
<table class="table table-dark table-borderless">
<thead>
<tr>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">見出し</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<th scope="row">見出し</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<th scope="row">見出し</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
</tbody>
</table>
行のマウスオーバー表示
table クラスが設定されている table 要素に table-hoverクラスを追加することで、tbody 要素内にマウスオーバーした際にその行の背景を変更することができます。
<table class="table table-hover">
<thead>
<tr>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">見出し</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<th scope="row">見出し</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<th scope="row">見出し</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
</tbody>
</table>
<table class="table table-dark table-hover">
<thead>
<tr>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">見出し</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<th scope="row">見出し</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<th scope="row">見出し</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
</tbody>
</table>
テーブルのコンパクト化
table クラスが設定されている table 要素に table-smクラスを追加することで、セルのパディングを小さくしテーブルをコンパクトにすることができます。
<p>コンパクト前</p>
<table class="table">
<thead>
<tr>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">見出し</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<th scope="row">見出し</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<th scope="row">見出し</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
</tbody>
</table>
<br>
<p>コンパクト後</p>
<table class="table table-sm">
<thead>
<tr>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">見出し</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<th scope="row">見出し</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<th scope="row">見出し</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
</tbody>
</table>
テーブル行・セルの色付け
テーブル行の色付け
tr 要素に table-{ 色の種類 } クラスを追加することで行に色付けすることができます。
<table class="table">
<thead>
<tr>
<th scope="col">クラス名</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">標準</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr class="table-active">
<th scope="row">table-active</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr class="table-primary">
<th scope="row">table-primary</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr class="table-secondary">
<th scope="row">table-secondary</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr class="table-success">
<th scope="row">table-success</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr class="table-danger">
<th scope="row">table-danger</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr class="table-warning">
<th scope="row">table-warning</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr class="table-info">
<th scope="row">table-info</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr class="table-light">
<th scope="row">table-light</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr class="table-primary">
<th scope="row">table-dark</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
</tbody>
</table>
セルの色付け
th要素または td要素に table-{ 色の種類 } クラスを追加することで個々のセルに色付けすることができます。
<table class="table">
<thead>
<tr>
<th scope="col">クラス名</th>
<th scope="col">見出し</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">標準</th>
<td>データ</td>
</tr>
<tr>
<th scope="row">table-active</th>
<td class="table-active">データ</td>
</tr>
<tr>
<th scope="row">table-primary</th>
<td class="table-primary">データ</td>
</tr>
<tr>
<th scope="row">table-secondary</th>
<td class="table-secondary">データ</td>
</tr>
<tr>
<th scope="row">table-success</th>
<td class="table-success">データ</td>
</tr>
<tr>
<th scope="row">table-danger</th>
<td class="table-danger">データ</td>
</tr>
<tr>
<th scope="row">table-warning</th>
<td class="table-warning">データ</td>
</tr>
<tr>
<th scope="row">table-info</th>
<td class="table-info">データ</td>
</tr>
<tr>
<th scope="row">table-light</th>
<td class="table-light">データ</td>
</tr>
<tr>
<th scope="row">table-dark</th>
<td class="table-primary">データ</td>
</tr>
</tbody>
</table>
Color ユーティリティによる色付け
bg-{ 色の種類 } クラスを追加することで、行やセルに色付けすることができます。
先ほどのtable-{ 色の種類 } クラスを使用できない暗色テーブルにも、こちらのクラスなら使用可能です。
<table class="table table-dark">
<thead>
<tr>
<th scope="col">クラス名</th>
<th scope="col">見出し</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">標準</th>
<td>データ</td>
</tr>
<tr>
<th scope="row">table-primary</th>
<td class="bg-primary">データ</td>
</tr>
<tr class="bg-secondary">
<th scope="row">table-secondary</th>
<td>データ</td>
</tr>
<tr>
<th scope="row">table-success</th>
<td class="bg-success">データ</td>
</tr>
<tr class="bg-danger">
<th scope="row">table-danger</th>
<td>データ</td>
</tr>
<tr>
<th scope="row">table-warning</th>
<td class="bg-warning">データ</td>
</tr>
<tr class="bg-info">
<th scope="row">table-info</th>
<td>データ</td>
</tr>
<tr>
<th scope="row">table-light</th>
<td class="bg-light">データ</td>
</tr>
<tr class="bg-primary">
<th scope="row">table-dark</th>
<td>データ</td>
</tr>
</tbody>
</table>
レスポンシブ対応のテーブル
table クラスに table-responsive クラスを追加することで、テーブル幅が画面幅を超えたときに横スクロールが表示されるようになります。
<table class="table table-responsive">
<thead>
<tr>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">見出し</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<th scope="row">見出し</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<th scope="row">見出し</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
</tbody>
</table>
今回は以上になります。
ご覧いただきありがとうございました(^^)
続きはこちら↓
コメント