とほほのBootstrap 4入門

1. トップ
2. Bootstrap 4入門
3. テーブル

基本テーブル

.table クラスを指定すると、Bootstrap の標準のテーブルとなります。

<table class="table">
  <caption>List of users</caption>
  <tr><th>Name</th><th>Age</th></tr>
  <tr><td>Yamada</td><td>16</td></tr>
  <tr><td>Suzuki</td><td>26</td></tr>
  <tr><td>Tanaka</td><td>36</td></tr>
</table>

黒色テーブル

.table-dark を指定すると、黒系のテーブルとなります。

<table class="table table-dark">
    :
</table>

ヘッダオプション

.thead-dark は黒系ヘッダを表示します。

<table class="table">
  <thead class="thead-dark">
    <tr><th>Name</th><th>Age</th></tr>
  </thead>
    :
</table>

.thead-light は明るい灰色ヘッダを表示します。

<table class="table">
  <thead class="thead-light">
    <tr><th>Name</th><th>Age</th></tr>
  </thead>
    :
</table>

ストライプテーブル

.table-striped は 1行おきに背景色をつけます。

<table class="table table-striped">
  <tr><th>Name</th><th>Age</th></tr>
  <tr><td>Yamada</td><td>16</td></tr>
  <tr><td>Suzuki</td><td>26</td></tr>
  <tr><td>Tanaka</td><td>36</td></tr>
</table>

ボーダー付きテーブル

.table-bordered はテーブルの各セルにボーダーをつけます。

<table class="table table-bordered">
  <tr><th>Name</th><th>Age</th></tr>
  <tr><td>Yamada</td><td>16</td></tr>
  <tr><td>Suzuki</td><td>26</td></tr>
  <tr><td>Tanaka</td><td>36</td></tr>
</table>

ボーダー無しテーブル

.table-borderless はテーブルのボーダーを無しにします。

<table class="table table-borderless">
  <tr><th>Name</th><th>Age</th></tr>
  <tr><td>Yamada</td><td>16</td></tr>
  <tr><td>Suzuki</td><td>26</td></tr>
  <tr><td>Tanaka</td><td>36</td></tr>
</table>

ホバーテーブル

.table-hover はテーブルの列にマウスを乗せた際に背景色を変更します。

<table class="table table-hover">
  <tr><th>Name</th><th>Age</th></tr>
  <tr><td>Yamada</td><td>16</td></tr>
  <tr><td>Suzuki</td><td>26</td></tr>
  <tr><td>Tanaka</td><td>36</td></tr>
</table>

小テーブル

.table-sm は通常よりも行幅の狭いテーブルにします。Bootstrap 3 では .table-condensed とされていました。

<table class="table table-sm">
  <tr><th>Name</th><th>Age</th></tr>
  <tr><td>Yamada</td><td>16</td></tr>
  <tr><td>Suzuki</td><td>26</td></tr>
  <tr><td>Tanaka</td><td>36</td></tr>
</table>

コンテキストクラス

<tr>, <th>, <td> に .table-active, .table-success 等を指定して背景色を指定します。

<table class="table table-sm">
  <tr><th>Class</th><th>Description</th></tr>
  <tr class="table-active"><td>.active</td><td>This is a active message.</td></tr>
  <tr class="table-primary"><td>.primary</td><td>This is a primary message.</td></tr>
  <tr class="table-secondary"><td>.secondary</td><td>This is a secondary message.</td></tr>
  <tr class="table-success"><td>.success</td><td>This is a success message.</td></tr>
  <tr class="table-danger"><td>.danger</td><td>This is a danger message.</td></tr>
  <tr class="table-warning"><td>.warning</td><td>This is a warning message.</td></tr>
  <tr class="table-info"><td>.info</td><td>This is a information message.</td></tr>
  <tr class="table-light"><td>.light</td><td>This is a light message.</td></tr>
  <tr class="table-dark"><td>.dark</td><td>This is a dark message.</td></tr>
</table>

背景色

.bg-primary などの背景色を指定することも可能です。

<table class="table table-sm">
  <tr><th>Class</th><th>Description</th></tr>
  <tr class="bg-primary"><td>.primary</td><td>This is a primary message.</td></tr>
  <tr class="bg-secondary"><td>.secondary</td><td>This is a secondary message.</td></tr>
  <tr class="bg-success"><td>.success</td><td>This is a success message.</td></tr>
  <tr class="bg-danger"><td>.danger</td><td>This is a danger message.</td></tr>
  <tr class="bg-warning"><td>.warning</td><td>This is a warning message.</td></tr>
  <tr class="bg-info"><td>.info</td><td>This is a information message.</td></tr>
  <tr class="bg-light"><td>.light</td><td>This is a light message.</td></tr>
  <tr class="bg-dark text-light"><td>.dark</td><td>This is a dark message.</td></tr>
  <tr class="bg-white text-light"><td>.white</td><td>This is a white message.</td></tr>
  <tr class="bg-transparent text-light"><td>.transparent</td><td>This is a transparent message.</td></tr>
</table>

レスポンシブテーブル

.table-responsive は、画面の横幅が狭くなるとスクロールバーを表示します。上が table-responsive を指定したテーブル、下が指定していないテーブルです。ブラウザの横幅を狭くすると、レスポンシブテーブルではスクロールバーが表示されます。.table-responsive-sm, .table-responsive-md, .table-responsive-lg, .table-responsive-xl は、sm 以上、md 以上、lg 以上、xl 以上の時にスクロールバーが表示されます。

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

---