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

テーブル(Tables)

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

標準のテーブル(Overview)v5.0.0-alpha1スタイル変更

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

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

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

見本 ※v4のテーブルのデザインはこちらに記載
# 見出し 見出し 見出し
1 テーブルのセル テーブルのセル テーブルのセル
2 テーブルのセル テーブルのセル テーブルのセル
3 テーブルのセル テーブルのセル テーブルのセル
設定例
<table class="table">
	<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" を入れる
【変更履歴】
  • 【v5.0.0-alpha1】よりシンプルなスタイルに変更
    • セルの border-top の設定がなくなる
    • theadtbody の境界線の太さで2pxの設定がなくなる
    • セルの padding が0.75rem⇒0.5remに変更

 

カラーバリエーション(Variants)

1. コンテキストクラスで設定 v5.0.0-alpha1一部スタイル変更

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

カラーバリエーションの種類
タイプ クラス名 見出し 見出し
Active .table-active テーブルのセル テーブルのセル
Primary .table-primary テーブルのセル テーブルのセル
Secondary .table-secondary テーブルのセル テーブルのセル
Success .table-success テーブルのセル テーブルのセル
Info .table-info テーブルのセル テーブルのセル
Warning .table-warning テーブルのセル テーブルのセル
Danger .table-danger テーブルのセル テーブルのセル
Light .table-light テーブルのセル テーブルのセル
Dark .table-dark テーブルのセル テーブルのセル
※標準(参考) 設定なし テーブルのセル テーブルのセル
設定例
テーブル全体の場合<table class="table table-active">
	<tr>
		<td>...</td>
	</tr>
</table>
行の場合<tr class="table-active">
	<td>...</td>
</tr>
セルの場合<tr>
	<td class="table-active">...</td>
</tr>
【設定】
  • テーブル全体(table.table)、行全体(<tr>)、セル(<th>, <td>)に .table-{themecolor}(上記の「背景色の種類」から選択)を入れる
    • {themecolor} は、active, primary, secondary, success, info, warning, danger, light, dark のいずれかを選択
【変更履歴】
  • 【v5.0.0-alpha1】
    • <tr>.table-dark を追加した場合と、<th>, <td>.table-dark を追加した場合では背景色、枠線色が異なる現象が解消
    • .table-{themecolor} 独自の border-color の設定がなくなる(ブラウザのダークモードを除く)

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

文字色背景色ユーティリティクラスを使用して同様のスタイルを実現。

背景色の種類
タイプ クラス名 見出し 見出し
Primary .bg-primary テーブルのセル テーブルのセル
Secondary .bg-secondary テーブルのセル テーブルのセル
Success .bg-success テーブルのセル テーブルのセル
Info .bg-info テーブルのセル テーブルのセル
Warning .bg-warning テーブルのセル テーブルのセル
Danger .bg-danger テーブルのセル テーブルのセル
Light .bg-light テーブルのセル テーブルのセル
Dark .bg-dark.text-white テーブルのセル テーブルのセル
White .bg-white テーブルのセル テーブルのセル
※標準(参考) 設定なし テーブルのセル テーブルのセル
設定例
テーブル全体の場合<table class="table bg-primary">
	<tr>
		<td>...</td>
	</tr>
</table>
行の場合<table class="table">
	<tr class="bg-primary">
		<td>...</td>
	</tr>
</table>
セルの場合<table class="table">
	<tr>
		<td class="bg-primary">...</td>
	</tr>
</table>
【設定】
  • テーブル全体(table.table)、行全体(<tr>)、セル(<th>, <td>)に .bg-{themecolor}背景色ユーティリティクラスから選択)を入れる
【注意】

 

アクセント付きテーブル(Accented tables)

行が縞ストライブのテーブル(Striped rows)

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

1. 標準のテーブルに設定

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

これらのクラスは、カラーバリエーション・テーブルに追加することも可能。

2. Darkのテーブルに設定

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

3. Successのテーブルに設定

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

4. 背景色ユーティリティを使用したテーブルに設定

見本
# 見出し 見出し 見出し
1 テーブルのセル テーブルのセル テーブルのセル
2 テーブルのセル テーブルのセル テーブルのセル
3 テーブルのセル テーブルのセル テーブルのセル
【設定】
  • table.table.table-striped を追加すると、<tbody> 内の行の背景色が交互に変わるようになる

行がホバー表示するテーブル(Hoverable rows)

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

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

●Darkのテーブルで設定

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

ホバー表示可能な行は、縞ストライブのテーブルと組み合わせ可能。

見本
# 見出し 見出し 見出し
1 テーブルのセル テーブルのセル テーブルのセル
2 テーブルのセル テーブルのセル テーブルのセル
3 テーブルのセル テーブルのセル テーブルのセル
設定例
<table class="table table-striped table-hover">
  ...
</table>
【設定】
  • table.table.table-hover を追加すると、<tbody> 内の行にカーソルを合わせるとその行の背景色が変わるようになる

強調表示するテーブル(Active tables)v5.0.0-alpha1新設

.table-active クラスを追加して、テーブルの行やセルを強調表示。

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

●Darkのテーブルで設定

# 見出し 見出し 見出し
1 テーブルのセル テーブルのセル テーブルのセル
2 テーブルのセル テーブルのセル テーブルのセル
3 テーブルの結合セル テーブルのセル
設定例
<table class="table">
	<thead>
		...
	</thead>
	<tbody>
		<tr class="table-active">
			...
		</tr>
		<tr>
			...
		</tr>
		<tr>
			<th scope="row">3</th>
			<td colspan="2" class="table-active">テーブルの結合セル</td>
			<td>テーブルのセル</td>
		</tr>
	</tbody>
</table>
【設定】
  • 強調したいセルに .table-active を追加(カラーバリエーションテーブルでも設定可)

 

カラーバリエーションやアクセント付きテーブルのしくみ(How do the variants and accented tables work?)v5.0.0-alpha1新設

アクセント付きテーブル(縞ストライブの行ホバー表示可能な行強調表示のテーブル)については、いくつかの手法を使用して、すべてのカラーバリエーション・テーブルでこれらの効果を機能させた。

  • 始めに --bs-table-bg カスタムプロパティでテーブルセルの背景色を設定する。次に、すべてのカラーバリエーション・テーブルにそのカスタムプロパティを設定して、テーブルセルに色を付ける。これにより、テーブルの背景に半透明の色を使用しても問題が発生しない。
  • 次に、box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg); を使用してテーブルセルに挿入ボックスシャドウを追加し、指定した background-color の上に重ねる。広がりが大きく、ボケがないため、単調になる。--bs-table-accent-bg はデフォルトで設定されていないため、デフォルトのボックスシャドウはない。
  • .table-striped, .table-hover, .table-active クラスのいずれかが追加されると、-bs-table-accent-bg が半透明の色に設定され、背景が色付けされる。
  • カラーバリエーション・テーブルごとに、そのコントラストが最も高い --bs-table-accent-bg カラーを生成。例えば .table-primary は暗めのアクセントカラーで、.table-dark は明るめのアクセントカラーになる。
  • テキストと罫線の色は同じ方法で生成され、それらの色はデフォルトで継承される。

裏では以下のようになる:

デフォルトの設定
scss/mixins/_table-variants.scss@mixin table-variant($state, $background) {
  .table-#{$state} {
    $color: color-contrast(opaque($body-bg, $background));
    $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
    $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
    $active-bg: mix($color, $background, percentage($table-active-bg-factor));

    --bs-table-bg: #{$background};
    --bs-table-striped-bg: #{$striped-bg};
    --bs-table-striped-color: #{color-contrast($striped-bg)};
    --bs-table-active-bg: #{$active-bg};
    --bs-table-active-color: #{color-contrast($active-bg)};
    --bs-table-hover-bg: #{$hover-bg};
    --bs-table-hover-color: #{color-contrast($hover-bg)};

    color: $color;
    border-color: mix($color, $background, percentage($table-border-factor));
  }
}
【注意】

 

テーブルの罫線(Table borders)

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

1. 標準のテーブルの設定

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

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

●Darkのテーブルで設定

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

2. 罫線の色ユーティリティクラスを使用 v5.0.0-alpha1新設

罫線の色ユーティリティを追加して、罫線の色の変更が可能。

見本
# 見出し 見出し 見出し
1 テーブルのセル テーブルのセル テーブルのセル
2 テーブルのセル テーブルのセル テーブルのセル
3 テーブルの結合セル テーブルのセル
設定例
<table class="table table-bordered border-primary">
 ...
</table>
【設定】
  • table.table.table-bordered を追加
  • table.table.table-bordered.border-{themecolor}罫線の色ユーティリティクラス)を追加すれば罫線の色が変更可能に

罫線のないテーブル(Tables without borders)

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

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

●Darkのテーブルで設定

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

 

セル間が狭いテーブル(Small table)

.table-sm を追加して、すべてのセルの padding を半分にすることで .table をよりコンパクトにする。

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

●Darkのテーブルで設定

# 見出し 見出し 見出し
1 テーブルのセル テーブルのセル テーブルのセル
2 テーブルのセル テーブルのセル テーブルのセル
3 テーブルのセル テーブルのセル テーブルのセル
設定例
<table class="table table-sm">
 ...
</table>
【設定】
  • table.table.table-sm を追加(セルの padding が0.25remに)

 

垂直方向の配置(Vertical alignment)v5.0.0-alpha1新設

<thead> のテーブルセルは常に垂直で下揃えに配置。<tbody> 内のテーブルセルは <table> からそれらの配置を継承し、デフォルトで上揃えに配置。

見本
見出し 1 見出し 2 見出し 3 見出し 4
このセルはテーブルから vertical-align: middle; を継承 このセルはテーブルから vertical-align: middle; を継承 このセルはテーブルから vertical-align: middle; を継承 これは、前のセルで垂直方向の配置がどのように機能するかを示すために、かなりの垂直方向のスペースを占めることを目的としたプレースホルダーテキスト。
このセルはテーブル行から vertical-align: bottom; を継承 このセルはテーブル行から vertical-align: bottom; を継承 このセルはテーブル行から vertical-align: bottom; を継承 これは、前のセルで垂直方向の配置がどのように機能するかを示すために、かなりの垂直方向のスペースを占めることを目的としたプレースホルダーテキスト。
このセルはテーブルから vertical-align: middle; を継承 このセルはテーブルから vertical-align: middle; を継承 このセルは上に揃えられる これは、前のセルで垂直方向の配置がどのように機能するかを示すために、かなりの垂直方向のスペースを占めることを目的としたプレースホルダーテキスト。
設定例
<div class="table-responsive">
	<table class="table align-middle">
		<thead>
			<tr>
				...
			</tr>
		</thead>
		<tbody>
			<tr>
				...
			</tr>
			<tr class="align-bottom">
				...
			</tr>
			<tr>
				<td>...</td>
				<td>...</td>
				<td class="align-top">このセルは上に揃えられる</td>
				<td>...</td>
			</tr>
		</tbody>
	</table>
</div>
【設定】

 

入れ子(Nesting)v5.0.0-alpha1新設

罫線、強調表示、カラーバリエーションのスタイルは、入れ子になったテーブルには継承されない。

見本
# 見出し 見出し 見出し
1 テーブルのセル テーブルのセル テーブルのセル
A テーブルのセル テーブルのセル
B テーブルのセル テーブルのセル
C テーブルのセル テーブルのセル
2 テーブルのセル テーブルのセル テーブルのセル
設定例
<table class="table table-striped table-bordered">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>
【変更履歴】
  • 【v5.0.0-alpha1】
    • テーブルを入れ子にしても子テーブルは親テーブルのスタイルを継承しなくなった(子テーブルは独自のスタイル設定ができるようになった)

 

入れ子のしくみ(How nesting works)v5.0.0-alpha1新設

入れ子になったテーブルに任意のスタイルが漏れるのを防ぐために、CSSで子コンビネータ(>)セレクタを使用。thead, tbody, tfoot のすべての tdth をターゲットにする必要があるため、セレクタがないとかなり長く見えてしまう。そのため、奇妙に見えるが .table > :not(caption) > * > * セレクタを使用して、.table のすべての tdth をターゲットにするが、入れ子になった潜在的なテーブルはターゲットにしない。

<tr> をテーブルの直接の子として追加すると、それらの <tr> はデフォルトで <tbody> で囲むことになるので、セレクタが意図したとおりに機能するので注意(子テーブルにも <thead>, <tbody> の設定をする)。

 

構造(Anatomy)

ヘッダの見出し(Table head)v5.0.0-alpha1設定変更

カラーバリエーション・テーブルと同様に、修飾子クラス .table-light.table-dark を使って、<thead> に色を付ける。

見本

●暗めの見出し

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

●明るめの見出し

# 見出し 見出し 見出し
1 テーブルのセル テーブルのセル テーブルのセル
2 テーブルのセル テーブルのセル テーブルのセル
3 テーブルのセル テーブルのセル テーブルのセル
Bootstrap5.xの設定例 緑背景が変更箇所
暗めの見出し<table class="table">
	<thead class="table-dark">
 ...
</table>
明るめの見出し<table class="table">
	<thead class="table-light">
 ...
</table>
※Bootstrap4.xの設定例 赤背景が変更箇所
暗めの見出し<table class="table">
	<thead class="thead-dark">
 ...
</table>
明るめの見出し<table class="table">
	<thead class="thead-light">
 ...
</table>
【設定】
  • <thead> タグに .table-{themecolor} を入れる(dark, light 以外も可)
【変更履歴】
  • 【v5.0.0-alpha1】
    • thead.thead-{dark|light}thead.table-{themecolor}.thead-{dark|light} は廃止)

フッタの見出し(Table foot)

見本
# 見出し 見出し 見出し
1 テーブルのセル テーブルのセル テーブルのセル
2 テーブルのセル テーブルのセル テーブルのセル
3 テーブルのセル テーブルのセル テーブルのセル
# 見出し 見出し 見出し
設定例
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>
【設定】
  • <tbody> の後に <tfoot> をつけることも可能(Bootstrap特有の設定はない)

キャプション(Captions)v5.0.0-alpha1クラス追加

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

1. 標準の設定(テーブルの下部にキャプションを配置)

見本
テーブルのキャプション
# 見出し 見出し 見出し
1 テーブルのセル テーブルのセル テーブルのセル
2 テーブルのセル テーブルのセル テーブルのセル
3 テーブルのセル テーブルのセル テーブルのセル
設定例
<table class="table">
	<caption>テーブルのキャプション</caption>
	...
</table>

2. テーブルの上部にキャプションを配置 v5.0.0-alpha1追加

.caption-top を使用すれば、テーブルの上部に <caption> が配置可能。

見本
テーブルのキャプション
# 見出し 見出し 見出し
1 テーブルのセル テーブルのセル テーブルのセル
2 テーブルのセル テーブルのセル テーブルのセル
3 テーブルのセル テーブルのセル テーブルのセル
設定例
<table class="table caption-top">
	<caption>テーブルのキャプション</caption>
	...
</table>
【設定】
  • table.table > <caption>(キャプションはテーブルの下に表示される)
  • キャプションをテーブルの上部に配置するには table.table.caption-top を追加(<caption> には追加しないこと)

 

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

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

常にレスポンシブ(Always responsive)

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

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

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

# 見出し 見出し 見出し 見出し 見出し 見出し 見出し 見出し 見出し
1 テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル
2 テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル
3 テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル
設定例
<div class="table-responsive">
	<table class="table">
	 ...
	</table>
</div>
セル内で文章を折り返さない<div class="table-responsive">
	<table class="table text-nowrap">
	 ...
	</table>
</div>
【設定】
  • div.table-responsive > table.table
  • テーブルがコンテナよりも広いときは、必要に応じてセルを折り返すので、table.table.text-nowrap を追加すると、セルを折り返さずに表示される

特定のブレークポイント(Breakpoint specific)v5.0.0-alpha1クラス追加

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

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

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

●ビューポートが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 テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル

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

# 見出し 見出し 見出し 見出し 見出し 見出し
1 テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル
2 テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル
3 テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル
設定例
<div class="table-responsive-sm">
	<table class="table">
	 ...
	</table>
</div>
【設定】
  • ビューポートに応じて、水平スクロール表示にする場合は、table.tablediv.table-responsive-{breakpoint} で囲む
    • {breakpoint}sm(小), md(中), lg(大), xl(特大), xxl(超特大)のいずれかを選択)は、グリッド・システムのビューポイントに準ずる
【注意】
  • 指定したビューポート以上でテーブルの幅がコンテナよりも広いときは、はみ出して表示される
【変更履歴】
  • 【v5.0.0-alpha1】
    • .table-responsive-xxl が追加

 

Sass v5.0.0-alpha1追加、v5.0.0-beta3「Sassでのカスタマイズ」から変更

変数(Variables)

デフォルトの設定
scss/_variables.scss 内 table-variables の設定$table-cell-padding-y:        .5rem;
$table-cell-padding-x:        .5rem;
$table-cell-padding-y-sm:     .25rem;
$table-cell-padding-x-sm:     .25rem;

$table-cell-vertical-align:   top;

$table-color:                 $body-color;
$table-bg:                    transparent;

$table-th-font-weight:        null;

$table-striped-color:         $table-color;
$table-striped-bg-factor:     .05;
$table-striped-bg:            rgba($black, $table-striped-bg-factor);

$table-active-color:          $table-color;
$table-active-bg-factor:      .1;
$table-active-bg:             rgba($black, $table-active-bg-factor);

$table-hover-color:           $table-color;
$table-hover-bg-factor:       .075;
$table-hover-bg:              rgba($black, $table-hover-bg-factor);

$table-border-factor:         .1;
$table-border-width:          $border-width;
$table-border-color:          $border-color;

$table-striped-order:         odd;

$table-group-separator-color: currentColor;

$table-caption-color:         $text-muted;

$table-bg-scale:              -80%;

ループ(Loop)

デフォルトの設定
scss/_variables.scss 内 table-loop の設定$table-variants: (
  "primary":    shift-color($primary, $table-bg-scale),
  "secondary":  shift-color($secondary, $table-bg-scale),
  "success":    shift-color($success, $table-bg-scale),
  "info":       shift-color($info, $table-bg-scale),
  "warning":    shift-color($warning, $table-bg-scale),
  "danger":     shift-color($danger, $table-bg-scale),
  "light":      $light,
  "dark":       $dark,
);

カスタマイズ(Customizing)

  • 因子変数($table-striped-bg-factor, $table-active-bg-factor, $table-hover-bg-factor)は、テーブルのカラーバリエーションのコントラストを決定するのに使用される。
  • lightのテーブルとdarkのテーブルのカラーバリエーションは別として、テーマの色は $table-bg-scale 変数によって明るくしている。