テーブル（Tables）

デフォルトのテーブル（Overview）v5.2.0スタイル変更

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

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

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

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

設定例

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

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

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

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

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

設定例

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

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

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

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>

3. 文字&背景色ヘルパークラスで設定 v5.2.0新設

文字&背景色ヘルパークラスを使用して同様のスタイルを実現。

背景色の種類

設定例

テーブル全体の場合<table class="table text-bg-primary">
  <tr>
    <td>...</td>
  </tr>
</table>

行の場合<table class="table">
  <tr class="text-bg-primary">
    <td>...</td>
  </tr>
</table>

セルの場合<table class="table">
  <tr>
    <td class="text-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. 背景色ユーティリティを使用したテーブルに設定

見本

設定例

<table class="table bg-warning table-striped">
　...
</table>

列が縞ストライブのテーブル（Striped columns）v5.2.0新設

.table-striped-columns を使用して、任意のテーブル列に縞ストライブを追加する。

1. デフォルトのテーブルに設定

見本

設定例

<table class="table table-striped-columns">
　...
</table>

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

2. Darkのテーブルに設定

見本

設定例

<table class="table table-dark table-striped-columns">
　...
</table>

3. Successのテーブルに設定

見本

設定例

<table class="table table-success table-striped-columns">
　...
</table>

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

見本

設定例

<table class="table bg-warning table-striped-columns">
　...
</table>

行がホバー表示するテーブル（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-striped-columns, .table-hover, .table-active クラスのいずれかが追加されると、-bs-table-accent-bg が半透明の色に設定され、背景が色付けされる。
• カラーバリエーション・テーブルごとに、そのコントラストが最も高い --bs-table-accent-bg カラーを生成。例えば .table-primary は暗めのアクセントカラーで、.table-dark は明るめのアクセントカラーになる。
• テキストと罫線の色は同じ方法で生成され、それらの色はデフォルトで継承される。

舞台裏では次のようになっている：

デフォルトの設定

scss/mixins/_table-variants.scss 内 table-variant の設定@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));
    $table-border-color: mix($color, $background, percentage($table-border-factor));

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

    color: var(--#{$prefix}table-color);
    border-color: var(--#{$prefix}table-border-color);
  }
}

テーブルの罫線（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>

テーブルグループの仕切り線（Table group dividers）v5.2.0新設

.table-group-divider を使用して、テーブルグループ（<thead>, <tbody>, <tfoot>）の間に太い境界線を追加。border-top-color を変更すればカラーをカスタマイズできる（現時点ではユーティリティクラスは提供していない）。

見本

設定例

<table class="table">
  <thead>
    ...
  </thead>
  <tbody class="table-group-divider">
    ...
  </tbody>
  <tfoot class="table-group-divider">
    ...
  </tfoot>
</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 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:                 var(--#{$prefix}body-color);
$table-bg:                    transparent;
$table-accent-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:          var(--#{$prefix}border-color);

$table-striped-order:         odd;
$table-striped-columns-order: even;

$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 変数によって明るくしている。