テーブル（Tables）

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

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

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

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

見本 ※v4のテーブルのデザインはこちらに記載

設定例

コピー<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>

 

カラーバリエーション（Variants）

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

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

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

設定例

テーブル全体の場合コピー<table class="table table-active">
	<tr>
		<td>...</td>
	</tr>
</table>

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

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

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

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

背景色の種類

設定例

テーブル全体の場合コピー<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>

 

アクセント付きテーブル（Accented tables）

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

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

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

見本

設定例

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

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

2. Darkのテーブルに設定

見本

設定例

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

3. Successのテーブルに設定

見本

設定例

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

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

見本

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

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

見本

設定例

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

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

見本

設定例

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

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

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

見本

設定例

コピー<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>

 

カラーバリエーションやアクセント付きテーブルのしくみ（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 を追加。

見本

設定例

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

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

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

見本

設定例

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

罫線のないテーブル（Tables without borders）

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

見本

設定例

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

 

セル間が狭いテーブル（Small table）

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

見本

設定例

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

 

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

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

見本

設定例

コピー<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新設

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

見本

設定例

コピー<table class="table table-striped table-bordered">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

 

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

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

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

 

構造（Anatomy）

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

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

見本

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>

フッタの見出し（Table foot）

見本

設定例

コピー<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

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

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

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

見本

設定例

コピー<table class="table">
	<caption>テーブルのキャプション</caption>
	...
</table>

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

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

見本

設定例

コピー<table class="table caption-top">
	<caption>テーブルのキャプション</caption>
	...
</table>

 

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

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

常にレスポンシブ（Always responsive）

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

見本

設定例

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

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

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

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

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

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

設定例

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

 

Sassでのカスタマイズ（Customizing in Sass）v5.0.0-alpha1新設

• ファクター（因子）変数（$table-striped-bg-factor, $table-active-bg-factor, $table-hover-bg-factor）は、カラーバリエーション・テーブルのコントラストを決定するのに使用。
• light と dark 以外の各テーマ色は $table-bg-level 変数によって明るくなる。

デフォルトの設定

scss/_variables.scss 内$table-cell-padding:          .5rem;
$table-cell-padding-sm:       .25rem;

$table-cell-vertical-align:   top;

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

$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-seperator-color: currentColor;

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

$table-bg-level:              -9;

$table-variants: (
  "primary":    color-level($primary, $table-bg-level),
  "secondary":  color-level($secondary, $table-bg-level),
  "success":    color-level($success, $table-bg-level),
  "info":       color-level($info, $table-bg-level),
  "warning":    color-level($warning, $table-bg-level),
  "danger":     color-level($danger, $table-bg-level),
  "light":      $light,
  "dark":       $dark,
);