とほほのBootstrap 4入門 
トップ >
Bootstrap 4入門 >
テーブル
基本テーブル
.table クラスを指定すると、Bootstrap の標準のテーブルとなります。
Sample
| Name | Age |
|---|---|
| Yamada | 16 |
| Suzuki | 26 |
| Tanaka | 36 |
Code
<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 を指定すると、黒系のテーブルとなります。
Sample
| Name | Age |
|---|---|
| Yamada | 16 |
| Suzuki | 26 |
| Tanaka | 36 |
Code
<table class="table table-dark">
:
</table>
ヘッダオプション
.thead-dark は黒系ヘッダを表示します。
Sample
| Name | Age |
|---|---|
| Yamada | 16 |
| Suzuki | 26 |
| Tanaka | 36 |
Code
<table class="table">
<thead class="thead-dark">
<tr><th>Name</th><th>Age</th></tr>
</thead>
:
</table>
.thead-light は明るい灰色ヘッダを表示します。
Sample
| Name | Age |
|---|---|
| Yamada | 16 |
| Suzuki | 26 |
| Tanaka | 36 |
Code
<table class="table">
<thead class="thead-light">
<tr><th>Name</th><th>Age</th></tr>
</thead>
:
</table>
ストライプテーブル
.table-striped は 1行おきに背景色をつけます。
Sample
| Name | Age |
|---|---|
| Yamada | 16 |
| Suzuki | 26 |
| Tanaka | 36 |
Code
<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 はテーブルの各セルにボーダーをつけます。
Sample
| Name | Age |
|---|---|
| Yamada | 16 |
| Suzuki | 26 |
| Tanaka | 36 |
Code
<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 はテーブルのボーダーを無しにします。
Sample
| Name | Age |
|---|---|
| Yamada | 16 |
| Suzuki | 26 |
| Tanaka | 36 |
Code
<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 はテーブルの列にマウスを乗せた際に背景色を変更します。
Sample
| Name | Age |
|---|---|
| Yamada | 16 |
| Suzuki | 26 |
| Tanaka | 36 |
Code
<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 とされていました。
Sample
| Name | Age |
|---|---|
| Yamada | 16 |
| Suzuki | 26 |
| Tanaka | 36 |
Code
<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 等を指定して背景色を指定します。
Sample
| Class | Description |
|---|---|
| .active | This is a active message. |
| .primary | This is a primary message. |
| .secondary | This is a secondary message. |
| .success | This is a success message. |
| .danger | This is a danger message. |
| .warning | This is a warning message. |
| .info | This is a information message. |
| .light | This is a light message. |
| .dark | This is a dark message. |
Code
<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 などの背景色を指定することも可能です。
Sample
| Class | Description |
|---|---|
| .primary | This is a primary message. |
| .secondary | This is a secondary message. |
| .success | This is a success message. |
| .danger | This is a danger message. |
| .warning | This is a warning message. |
| .info | This is a information message. |
| .light | This is a light message. |
| .dark | This is a dark message. |
| .white | This is a white message. |
| .transparent | This is a transparent message. |
Code
<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 以上の時にスクロールバーが表示されます。
Sample
| AAAAAAAAAAAA | AAAAAAAAAAAA | AAAAAAAAAAAA | AAAAAAAAAAAA | AAAAAAAAAAAA |
|---|
| AAAAAAAAAAAA | AAAAAAAAAAAA | AAAAAAAAAAAA | AAAAAAAAAAAA | AAAAAAAAAAA |
|---|
Code
<div class="table-responsive">
<table class="table">
<tr>...</tr>
</table>
</div>
<div>
<table class="table">
<tr>...</tr>
</table>
</div>
Copyright (C) 2015-2019 杜甫々
初版:2015年9月6日 最終更新:2019年1月6日
http://www.tohoho-web.com/bootstrap/tables.html