メインコンテンツへスキップ

Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。

テーブル(Tables) v4.0.0一部変更v4.1.0追加

Bootstrapを使ったテーブルの選択スタイル(JavaScriptプラグインで広く使用されている)のドキュメントと例。

基本のテーブル(Example)

カレンダーや日付選択ツールなどのサードパーティのウィジェットでテーブルが広く使用されているため、テーブルの設定をオプトインで設計。任意の <table> に基本クラスの .table を追加して、カスタムスタイルや様々な組み込み修飾子クラスを拡張する。

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

標準のテーブル

最も基本的なテーブルマークアップを使用して、テーブルベースのテーブルがBootstrapでどのように見えるかを以下に表示。すべてのテーブルのスタイルは、Bootstrap4で継承される。つまり、入れ子になったテーブルは、親テーブルと同じ方法でスタイルされる。

見本
# 見出し 見出し 見出し
1 テーブルのセル テーブルのセル テーブルのセル
2 テーブルのセル テーブルのセル テーブルのセル
3 テーブルのセル テーブルのセル テーブルのセル
設定例
<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>

【設定】

  • table.table > [<thead> > <tr> > <th>]《表頭》 + [<tbody> > <tr> > <th>+<td>]《表のコンテンツ》
    <table> タグの中に .table を入れる

アクセシビリティの設定】

  • 行(右)方向に対する見出しの <th> タグには scope="row" を入れる
  • 列(下)方向に対する見出しの <th> タグには scope="col" を入れる

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

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

見本
# 見出し 見出し 見出し
1 テーブルのセル テーブルのセル テーブルのセル
2 テーブルのセル テーブルのセル テーブルのセル
3 テーブルのセル テーブルのセル テーブルのセル
設定例
<table class="table table-dark">
 ...
</table>

【設定】

  • table.table.table-dark を追加

【変更履歴】

  • 【v4.0.0-beta.2】.table-inverse.table-dark

表見出しのオプション(Table head options)v4.0.0新設

標準および暗めのテーブルと同様に、修飾子クラス .thead-light.thead-dark を使って、<thead> を明るめまたは暗めの灰色にする。

見本

●暗めの表見出し .thead-dark

# 見出し 見出し 見出し
1 テーブルのセル テーブルのセル テーブルのセル
2 テーブルのセル テーブルのセル テーブルのセル
3 テーブルのセル テーブルのセル テーブルのセル

●明るめの表見出し .thead-light

# 見出し 見出し 見出し
1 テーブルのセル テーブルのセル テーブルのセル
2 テーブルのセル テーブルのセル テーブルのセル
3 テーブルのセル テーブルのセル テーブルのセル
設定例
暗めの表見出し<table class="table">
	<thead class="thead-dark">
 ...
</table>
明るめの表見出し<table class="table">
	<thead class="thead-light">
 ...
</table>

【設定】

  • <thead> タグに .thead-{dark|light} を入れる

【変更履歴】

  • 【v4.0.0-beta.2】.thead-inverse.thead-dark.thead-default.thead-light

 

交互に行の色が変わるテーブル(Striped rows)

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

見本
# 見出し 見出し 見出し
1 テーブルのセル テーブルのセル テーブルのセル
2 テーブルのセル テーブルのセル テーブルのセル
3 テーブルのセル テーブルのセル テーブルのセル

●暗めのテーブルで設定

# 見出し 見出し 見出し
1 テーブルのセル テーブルのセル テーブルのセル
2 テーブルのセル テーブルのセル テーブルのセル
3 テーブルのセル テーブルのセル テーブルのセル
設定例
<table class="table table-striped">
 ...
</table>

【設定】

  • table.table.table-striped を追加すると、<tbody> 内の行の背景色が交互に変わるようになる

 

縦線が入ったテーブル(Bordered table)

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

見本
# 見出し 見出し 見出し
1 テーブルのセル テーブルのセル テーブルのセル
2 テーブルのセル テーブルのセル テーブルのセル
3 テーブルの結合セル テーブルのセル

●暗めのテーブルで設定

# 見出し 見出し 見出し
1 テーブルのセル テーブルのセル テーブルのセル
2 テーブルのセル テーブルのセル テーブルのセル
3 テーブルの結合セル テーブルのセル
設定例
<table class="table table-bordered">
 ...
</table>

【設定】

  • table.table.table-bordered を追加

 

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

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

見本
# 見出し 見出し 見出し
1 テーブルのセル テーブルのセル テーブルのセル
2 テーブルのセル テーブルのセル テーブルのセル
3 テーブルの結合セル テーブルのセル

●暗めのテーブルで設定

# 見出し 見出し 見出し
1 テーブルのセル テーブルのセル テーブルのセル
2 テーブルのセル テーブルのセル テーブルのセル
3 テーブルの結合セル テーブルのセル
設定例
<table class="table table-borderless">
 ...
</table>

【設定】

  • table.table.table-borderless を追加
  • ※v4.0.0までの裏技(罫線を消したいセルの各 <td> または <th> タグに .border-top-0 等を入れる)は削除

 

マウスオーバーで行の背景色がホバー表示するテーブル(Hoverable rows)

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

見本
# 見出し 見出し 見出し
1 テーブルのセル テーブルのセル テーブルのセル
2 テーブルのセル テーブルのセル テーブルのセル
3 テーブルのセル テーブルのセル テーブルのセル

●暗めのテーブルで設定

# 見出し 見出し 見出し
1 テーブルのセル テーブルのセル テーブルのセル
2 テーブルのセル テーブルのセル テーブルのセル
3 テーブルのセル テーブルのセル テーブルのセル
設定例
<table class="table table-hover">
 ...
</table>

【設定】

  • table.table.table-hover を追加すると、<tbody> 内の行にカーソルを合わせるとその行の背景色がかわるようになる

 

行間が狭いテーブル(Small table)v4.0.0名称変更

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

見本
# 見出し 見出し 見出し
1 テーブルのセル テーブルのセル テーブルのセル
2 テーブルのセル テーブルのセル テーブルのセル
3 テーブルのセル テーブルのセル テーブルのセル

●暗めのテーブルで設定

# 見出し 見出し 見出し
1 テーブルのセル テーブルのセル テーブルのセル
2 テーブルのセル テーブルのセル テーブルのセル
3 テーブルのセル テーブルのセル テーブルのセル
Bootstrap3.xの設定例 赤背景が変更箇所
<table class="table table-condensed">
 ...
</table>
Bootstrap4.xの設定例 緑背景が変更箇所
<table class="table table-sm">
 ...
</table>

【設定】

  • table.table.table-sm を追加

【Bootstrap3.xとの変更箇所】

  • .table-condensed.table-sm に名称変更

 

行/セルの背景色(Contextual classes)

背景色クラスを使用して、表の行または個々のセルを色付る。

1. 標準のテーブルで設定 v4.0.0名称変更

背景色の種類

●行の場合

タイプ クラス名 見出し 見出し
Active .table-active v4.0.0名称変更 テーブルのセル テーブルのセル
Primary .table-primary v4.0.0追加 テーブルのセル テーブルのセル
Secondary .table-secondary v4.0.0追加 テーブルのセル テーブルのセル
Success .table-success v4.0.0名称変更 テーブルのセル テーブルのセル
Info .table-info v4.0.0名称変更 テーブルのセル テーブルのセル
Warning .table-warning v4.0.0名称変更 テーブルのセル テーブルのセル
Danger .table-danger v4.0.0名称変更 テーブルのセル テーブルのセル
Light .table-light v4.0.0追加 テーブルのセル テーブルのセル
Dark .table-dark v4.0.0追加 テーブルのセル テーブルのセル
※標準(参考) 設定なし テーブルのセル テーブルのセル

●セルの場合

タイプ クラス名 見出し 見出し
Active .table-active v4.0.0名称変更 テーブルのセル テーブルのセル
Primary .table-primary v4.0.0追加 テーブルのセル テーブルのセル
Secondary .table-secondary v4.0.0追加 テーブルのセル テーブルのセル
Success .table-success v4.0.0名称変更 テーブルのセル テーブルのセル
Info .table-info v4.0.0名称変更 テーブルのセル テーブルのセル
Warning .table-warning v4.0.0名称変更 テーブルのセル テーブルのセル
Danger .table-danger v4.0.0名称変更 テーブルのセル テーブルのセル
Light .table-light v4.0.0追加 テーブルのセル テーブルのセル
Dark .table-dark v4.0.0追加 テーブルのセル テーブルのセル
※標準(参考) 設定なし テーブルのセル テーブルのセル
Bootstrap3.xの設定例 赤背景が変更箇所
行の場合<tr class="active">
	<th scope="col">見出し</th>
	<td>...</td>
</tr>
セルの場合<tr>
	<th class="active" scope="col">見出し</th>
	<td class="active">...</td>
</tr>
Bootstrap4.xの設定例 緑背景が変更箇所
行の場合<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>

【設定】

  • 行全体(<tr>)、セル(<th>, <td>)に .table-{themecolor}(上記の「背景色の種類」から選択)を入れる
    • {themecolor} は、active, primary, secondary, success, info, warning, danger, light, dark のいずれかを選択

【注意】

  • <tr>.table-dark を追加した場合と、<th>, <td>.table-dark を追加した場合(暗めのテーブルと同じ)では背景色、枠線色が異なる

【Bootstrap3.xとの変更箇所】

  • Active:.active.table-active に名称変更
  • Success:.success.table-success に名称変更
  • Info:.info.table-info に名称変更
  • Warning:.warning.table-warning に名称変更
  • Danger:.danger.table-danger に名称変更

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

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

背景色の種類
タイプ クラス名 見出し 見出し
Primary .bg-primary テーブルのセル テーブルのセル
Secondary .bg-secondary テーブルのセル テーブルのセル
Success .bg-success テーブルのセル テーブルのセル
Info .bg-info テーブルのセル テーブルのセル
Warning .bg-warning テーブルのセル テーブルのセル
Danger .bg-danger テーブルのセル テーブルのセル
Light .bg-light.text-dark テーブルのセル テーブルのセル
Dark .bg-dark テーブルのセル テーブルのセル
※標準(参考) 設定なし テーブルのセル テーブルのセル
設定例
行の場合<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>

【設定】

  • 行全体(<tr>)、セル(<th>, <td>)に .bg-{themecolor}(上記の「背景色の種類」から選択)を入れる
    • {themecolor} は、active, primary, secondary, success, info, warning, danger, light, dark のいずれかを選択

【注意】

  • 暗めのテーブルでは標準のテーブルのような背景色の設定はできないが、カラフルなスタイルを実現するために、文字や背景色のユーティリティの使用が可能(標準のテーブルでも文字・背景色のユーティリティの使用は可能)

 

キャプション(Captions)

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

見本
テーブルの表題
# 見出し 見出し 見出し
1 テーブルのセル テーブルのセル テーブルのセル
2 テーブルのセル テーブルのセル テーブルのセル
3 テーブルのセル テーブルのセル テーブルのセル
設定例
<table class="table">
	<caption>テーブルの表題</caption>
	...
</table>

【設定】

  • table.table > <caption>
    表題はテーブルの下に表示される

【Bootstrap3.xとの変更箇所】

  • <caption> の表示位置がテーブルの下になった(table.table での設定ではなく、Rebootの仕様)。

 

レスポンシブテーブル(Responsive tables)

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

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

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

見本
# 見出し 見出し 見出し 見出し 見出し 見出し 見出し 見出し 見出し
1 テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル
2 テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル
3 テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル

●セル内で文章を折り返さないようにする(裏技)

# 見出し 見出し 見出し 見出し 見出し 見出し 見出し 見出し 見出し
1 テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル
2 テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル
3 テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル

●セルの幅100%での表示(裏技)標準のテーブルと同じ列の数での設定

# 見出し 見出し 見出し
1 テーブルのセル テーブルのセル テーブルのセル
2 テーブルのセル テーブルのセル テーブルのセル
3 テーブルのセル テーブルのセル テーブルのセル
設定例
<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>

【設定】

  • div.table-responsive > table.table
  • テーブルがコンテナよりも広いときは、必要に応じてセルを折り返すので、table.table.text-nowrap を追加すると、セルを折り返さずに表示される
  • テーブルの幅がコンテナ幅より狭いときは、コンテナ幅100%でなくセルの幅100%での表示にしたい場合は、table.table.table-responsive を追加(.table.table-bordered では不可

【変更履歴】

  • 【v4.0.0-beta.2】 .table-responsive:ビューポートが768px以下でテーブルがコンテナよりも広いときは水平にスクロール表示⇒全てのビューポートでテーブルがコンテナよりも広いときはセルを折り返して表示
  • 【v4.0.0-beta.3】table.table.table-responsive からv3のように div.table-responsive > table.table に戻す

【Bootstrap3.xとの変更箇所】

  • v4.0.0-beta.1までの .table-responsive は、.table-responsive-md に変更

特定のブレークポイント(Breakpoint specific)v4.0.0-beta.2新設

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

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

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

見本

●ビューポートが575px以下で、テーブルの幅がコンテナよりも広いときは水平スクロールが表示 .table-responsive-sm

# 見出し 見出し 見出し 見出し 見出し 見出し
1 テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル
2 テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル
3 テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル

●ビューポートが767px以下で、テーブルの幅がコンテナよりも広いときは水平スクロールが表示 .table-responsive-md

# 見出し 見出し 見出し 見出し 見出し 見出し
1 テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル
2 テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル
3 テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル

●ビューポートが991px以下で、テーブルの幅がコンテナよりも広いときは水平スクロールが表示 .table-responsive-lg

# 見出し 見出し 見出し 見出し 見出し 見出し
1 テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル
2 テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル
3 テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル

●ビューポートが1199px以下で、テーブルの幅がコンテナよりも広いときは水平スクロールが表示 .table-responsive-xl

# 見出し 見出し 見出し 見出し 見出し 見出し
1 テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル
2 テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル
3 テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル
設定例
<div class="table-responsive-sm">
	<table class="table">
	 ...
	</table>
</div>

【設定】

  • ビューポートに応じて、水平スクロール表示にする場合は、table.tablediv.table-responsive{-sm|-md|-lg|-xl} で囲む

【注意】

  • 指定したビューポート以上でテーブルの幅がコンテナよりも広いときは、はみ出して表示される