テーブル（Tables） v4.0.0一部変更v4.1.0追加

基本のテーブル（Example）

カレンダーや日付選択ツールなどのサードパーティ製ウィジェットで <table> 要素が広く使用されているため、Bootstrapのテーブル（表）はオプトイン（同意式）で設計。基本クラスの .table を任意の <table> に追加して、オプションの修飾子クラスやカスタムスタイルで拡張させる。すべてのテーブルのスタイルは、Bootstrap4で継承される。つまり、入れ子になったテーブルは、親テーブルと同じスタイルが継承される。

※マークアップのないベースのテーブルのスタイルはRebootに掲載。

デフォルトのテーブル

最も基本的なテーブルのマークアップを使用して、Bootstrapで .table ベースのテーブルがどのように見えるかを次に表示。

見本

設定例

コピー<table class="table">
	<caption>テーブルの表題</caption>
	<thead>
		<tr>
			<th>#</th>
			<th scope="col">見出し</th>
			...
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="row">1</th>
			<td>テーブルのセル</td>
			...
		</tr>
		...
	</tbody>
</table>

暗めのテーブル v4.0.0新設

.table-dark を使用して、暗い背景の明るいテキストに色を反転することも可能。

見本

設定例

コピー<table class="table table-dark">
　...
</table>

見出しのオプション（Table head options）v4.0.0新設

デフォルトや暗めのテーブルと同様に、修飾子クラス .thead-light や .thead-dark を使って、<thead> を明るめや暗めの灰色にする。

見本

設定例

暗めの見出しコピー<table class="table">
	<thead class="thead-dark">
　...
</table>

明るめの見出しコピー<table class="table">
	<thead class="thead-light">
　...
</table>

行が縞ストライブのテーブル（Striped rows）

.table-striped を使用して、<tbody> 内のテーブル行に縞ストライブを追加。

見本

設定例

コピー<table class="table table-striped">
　...
</table>

縦罫線が入ったテーブル（Bordered table）

テーブルとセルのすべての辺に罫線用の .table-bordered を追加。

見本

設定例

コピー<table class="table table-bordered">
　...
</table>

罫線のないテーブル（Borderless table）v4.1.0新設

.table-borderless を追加すると、罫線のないテーブルになる。

見本

設定例

コピー<table class="table table-borderless">
　...
</table>

行がホバー表示するテーブル（Hoverable rows）

.table-hover を追加すると、<tbody> 内のテーブル行でホバー状態が有効になる。

見本

設定例

コピー<table class="table table-hover">
　...
</table>

セル間が狭いテーブル（Small table）v4.0.0名称変更

.table-sm を追加して、セルの padding を半分にカットしてテーブルをコンパクトにする。

見本

<table class="table table-condensed">
　...
</table>

コピー<table class="table table-sm">
　...
</table>

カラーバリエーション（Contextual classes）

1. コンテキストクラスで設定 v4.0.0名称変更

コンテキストクラスを使用して、テーブルの行や個々のセルに色を付ける。

カラーバリエーションの種類

行の場合<tr class="active">
	<th scope="col">見出し</th>
	<td>...</td>
</tr>

セルの場合<tr>
	<th class="active" scope="col">見出し</th>
	<td class="active">...</td>
</tr>

行の場合コピー<tr class="table-active">
	<th scope="col">見出し</th>
	<td>...</td>
</tr>

セルの場合コピー<tr>
	<th class="table-active" scope="col">見出し</th>
	<td class="table-active">...</td>
</tr>

2. 背景色ユーティリティクラスで設定 v4.0.0新設

デフォルトのテーブルの背景色は、暗めのテーブルでは使用できないが、テキストや背景色ユーティリティクラスを使用して同様のスタイルを実現。

背景色の種類

設定例

行の場合コピー<table class="table table-dark">
	<tr class="bg-primary">
		<td>...</td>
	</tr>
</table>

セルの場合コピー<table class="table table-dark">
	<tr>
		<td class="bg-primary">...</td>
	</tr>
</table>

キャプション（Captions）

<caption> はテーブルの表題のように機能。スクリーンリーダーを持つユーザーがテーブルを見つけて、それが何であるかを理解し、それを読むかどうかを決定するのに役立つ。

見本

設定例

コピー<table class="table">
	<caption>テーブルの表題</caption>
	...
</table>

レスポンシブテーブル（Responsive tables）

レスポンステーブルを使用すると、テーブルを簡単に水平方向にスクロール可能。 .table を .table-responsive で囲むことによって、すべてのビューポートでレスポンシブ可能なテーブルを作成するか、最大幅のブレークポイントを持つレスポンシブテーブルを作成する場合は .table-responsive{-sm|-md|-lg|-xl} から選択。

常にレスポンシブ（Always responsive）v4.0.0設定変更

すべてのブレークポイントにわたって、テーブルを水平にスクロールするために .table-responsive を使用。

見本

設定例

コピー<div class="table-responsive">
	<table class="table">
	　...
	</table>
</div>

セル内で文章を折り返さないコピー<div class="table-responsive">
	<table class="table text-nowrap">
	　...
	</table>
</div>

セルの幅100%での表示コピー<table class="table table-responsive">
　...
</table>

特定のブレークポイント（Breakpoint specific）v4.0.0新設

必要に応じて .table-responsive{-sm|-md|-lg|-xl} を使用して、特定のブレークポイントまでのレスポンシブテーブルを作成。そのブレークポイント以降では、テーブルは正常に動作し、水平方向にスクロールしない。

これらのテーブルは、レスポンススタイルが特定のビューポートの幅に適用されるまで、破損しているように見える場合がある。

.table-responsive{-sm|-md|-lg|-xl} で任意の .table をラップすることによりレスポンシブ可能なテーブルを作成し、576px、768px、992px、1120pxまでの各 max-width のブレークポイントでテーブルを水平方向にスクロールさせる。

見本 ※画面からはみ出す部分は非表示にしています

設定例

コピー<div class="table-responsive-sm">
	<table class="table">
	　...
	</table>
</div>