【Bootstrap】テーブルのスタイリングを紹介

今回は、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>

今回は以上になります。

ご覧いただきありがとうございました(^^)
続きはこちら↓