Bootstrap4に用意されているクラス【table編】
2017.11.16
2021.04.07
基本
table
<table>
に基本クラス .table
を付けるとベースの表が表示されます。
#
見出し1
見出し2
見出し3
1
項目1
項目2
項目3
2
項目4
項目5
項目6
3
項目7
項目8
項目9
<table class= "table" >
<thead>
<tr>
<th scope= "col" > #</th>
<th scope= "col" > 見出し1</th>
<th scope= "col" > 見出し2</th>
<th scope= "col" > 見出し3</th>
</tr>
</thead>
<tbody>
<tr>
<th scope= "row" > 1</th>
<td> 項目1</td>
<td> 項目2</td>
<td> 項目3</td>
</tr>
<tr>
<th scope= "row" > 2</th>
<td> 項目4</td>
<td> 項目5</td>
<td> 項目6</td>
</tr>
<tr>
<th scope= "row" > 3</th>
<td> 項目7</td>
<td> 項目8</td>
<td> 項目9</td>
</tr>
</tbody>
</table>
table-dark
#
見出し1
見出し2
見出し3
1
項目1
項目2
項目3
2
項目4
項目5
項目6
3
項目7
項目8
項目9
<table class= "table table-dark" >
...
</table>
thead-light thead-dark
.thead-light
または .thead-dark
クラスを <thead>
に利用することもできます。
#
見出し1
見出し2
見出し3
1
項目1
項目2
項目3
2
項目4
項目5
項目6
3
項目7
項目8
項目9
#
見出し1
見出し2
見出し3
1
項目1
項目2
項目3
2
項目4
項目5
項目6
3
項目7
項目8
項目9
<table class= "table" >
<thead class= "thead-dark" >
...
</thead>
<tbody>
...
</tbody>
</table>
<table class= "table" >
<thead class= "thead-light" >
...
</thead>
<tbody>
...
</tbody>
</table>
ストライプ
.table-striped
を付けると<tbody>
の中のテーブル行が交互に色付きます。
#
見出し1
見出し2
見出し3
1
項目1
項目2
項目3
2
項目4
項目5
項目6
3
項目7
項目8
項目9
<table class= "table table-striped" >
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>
ボーダー
table-bordered
.table-bordered
を付けるとテーブルとセルの全ての横にラインが表示されます。
#
見出し1
見出し2
見出し3
1
項目1
項目2
項目3
2
項目4
項目5
項目6
3
項目7
項目8
項目9
4
項目10
項目11
<table class= "table table-bordered" >
...
</table>
マウスオーバーで背景色の変更
table-hover
.table-hover
を付けると<tbody>
の中のテーブル行をマウスオーバーすると背景色が変わるようになります。
#
見出し1
見出し2
見出し3
1
項目1
項目2
項目3
2
項目4
項目5
項目6
3
項目7
項目8
<table class= "table table-hover" >
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>
テーブル(小)
table-sm
.table-sm
を付けると行間の狭いテーブルになります。※.table-condensed
はなくなりました。
#
見出し1
見出し2
見出し3
1
項目1
項目2
項目3
2
項目4
項目5
項目6
3
項目7
項目8
<table class= "table table-sm" >
...
</table>
背景色の変更
テーブルの行<tr>
やセル<th>
<td>
に色をつけることができます。
Type
Column heading
Column heading
Column heading
Active
Column content
Column content
Column content
Default
Column content
Column content
Column content
Primary
Column content
Column content
Column content
Secondary
Column content
Column content
Column content
Success
Column content
Column content
Column content
Danger
Column content
Column content
Column content
Warning
Column content
Column content
Column content
Info
Column content
Column content
Column content
Light
Column content
Column content
Column content
Dark
Column content
Column content
Column content
<!-- On rows -->
<tr class= "table-active" > ...</tr>
<tr class= "table-primary" > ...</tr>
<tr class= "table-secondary" > ...</tr>
<tr class= "table-success" > ...</tr>
<tr class= "table-danger" > ...</tr>
<tr class= "table-warning" > ...</tr>
<tr class= "table-info" > ...</tr>
<tr class= "table-light" > ...</tr>
<tr class= "table-dark" > ...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class= "table-active" > ...</td>
<td class= "table-primary" > ...</td>
<td class= "table-secondary" > ...</td>
<td class= "table-success" > ...</td>
<td class= "table-danger" > ...</td>
<td class= "table-warning" > ...</td>
<td class= "table-info" > ...</td>
<td class= "table-light" > ...</td>
<td class= "table-dark" > ...</td>
</tr>
#
Column heading
Column heading
Column heading
1
Column content
Column content
Column content
2
Column content
Column content
Column content
3
Column content
Column content
Column content
4
Column content
Column content
Column content
5
Column content
Column content
Column content
6
Column content
Column content
Column content
7
Column content
Column content
Column content
8
Column content
Column content
Column content
9
Column content
Column content
Column content
<!-- On rows -->
<tr class= "bg-primary" > ...</tr>
<tr class= "bg-success" > ...</tr>
<tr class= "bg-warning" > ...</tr>
<tr class= "bg-danger" > ...</tr>
<tr class= "bg-info" > ...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class= "bg-primary" > ...</td>
<td class= "bg-success" > ...</td>
<td class= "bg-warning" > ...</td>
<td class= "bg-danger" > ...</td>
<td class= "bg-info" > ...</td>
</tr>
キャプション
<caption>
タグを付けることもできます。
ここにキャプションが入ります。
#
見出し1
見出し2
見出し3
1
項目1
項目2
項目3
2
項目4
項目5
項目6
3
項目7
項目8
<table class= "table" >
<caption> ここにキャプションが入ります。</caption>
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>
レスポンシブなテーブル
table-responsive
.table-responsive
でレスポンシブなテーブルを作ることができます。
#
Table heading
Table heading
Table heading
Table heading
Table heading
Table heading
Table heading
Table heading
Table heading
1
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
2
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
3
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
#
Table heading
Table heading
Table heading
Table heading
Table heading
Table heading
1
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
2
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
3
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
<table class= "table table-responsive" >
...
</table>
ブレークポイント table-responsive-**
#
Table heading
Table heading
Table heading
Table heading
Table heading
1
Table cell
Table cell
Table cell
Table cell
Table cell
2
Table cell
Table cell
Table cell
Table cell
Table cell
3
Table cell
Table cell
Table cell
Table cell
Table cell
#
Table heading
Table heading
Table heading
Table heading
Table heading
1
Table cell
Table cell
Table cell
Table cell
Table cell
2
Table cell
Table cell
Table cell
Table cell
Table cell
3
Table cell
Table cell
Table cell
Table cell
Table cell
#
Table heading
Table heading
Table heading
Table heading
Table heading
1
Table cell
Table cell
Table cell
Table cell
Table cell
2
Table cell
Table cell
Table cell
Table cell
Table cell
3
Table cell
Table cell
Table cell
Table cell
Table cell
#
Table heading
Table heading
Table heading
Table heading
Table heading
1
Table cell
Table cell
Table cell
Table cell
Table cell
2
Table cell
Table cell
Table cell
Table cell
Table cell
3
Table cell
Table cell
Table cell
Table cell
Table cell
<table class= "table table-responsive-sm" >
...
</table>
<table class= "table table-responsive-md" >
...
</table>
<table class= "table table-responsive-lg" >
...
</table>
<table class= "table table-responsive-xl" >
...
</table>