テーブル

Bootstrapを使って、（JavaScriptプラグインで広く使用されていることを考慮した）テーブルのオプトインスタイリングのドキュメントと例。

このページの内容

概要

カレンダーや日付ピッカーのようなサードパーティウィジェット全体で<table>要素が広く使用されているため、Bootstrapのテーブルは**オプトイン**です。基本クラス.tableを任意の<table>に追加し、オプションの修飾子クラスまたはカスタムスタイルで拡張します。すべてのテーブルスタイルはBootstrapでは継承されません。つまり、ネストされたテーブルは親とは独立してスタイルを設定できます。

最も基本的なテーブルマークアップを使用すると、Bootstrapでは.tableベースのテーブルは次のようになります。

#	名	姓	ハンドルネーム
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

バリアント

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

**注意！** テーブルバリアントの生成に使用されるCSSがより複雑なため、v6まではカラーモード適応スタイリングが表示されない可能性が高くなります。

クラス	見出し	見出し
デフォルト	セル	セル
プライマリ	セル	セル
セカンダリ	セル	セル
成功	セル	セル
危険	セル	セル
警告	セル	セル
情報	セル	セル
ライト	セル	セル
ダーク	セル	セル

<!-- On tables -->
<table class="table-primary">...</table>
<table class="table-secondary">...</table>
<table class="table-success">...</table>
<table class="table-danger">...</table>
<table class="table-warning">...</table>
<table class="table-info">...</table>
<table class="table-light">...</table>
<table class="table-dark">...</table>

<!-- On rows -->
<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="table-primary">...</td>
  <td class="table-secondary">...</td>
  <td class="table-success">...</td>
  <td class="table-danger">...</td>
  <td class="table-warning">...</td>
  <td class="table-info">...</td>
  <td class="table-light">...</td>
  <td class="table-dark">...</td>
</tr>

**アクセシビリティのヒント：** 色を使用して意味を追加すると、視覚的な表示のみが提供され、スクリーンリーダーなどの支援技術のユーザーには伝わりません。意味がコンテンツ自体から明らかであること（たとえば、_十分な_色コントラストのある表示テキスト）、または` `などの追加のテキストを非表示にするなど、代替手段によって含まれていることを確認してください。 .visually-hidden` `クラス。

アクセント付きテーブル

ストライプ行

`<tbody>` `内のテーブル行にシマウマの縞模様を追加するには、`.table-striped`を使用します。

#	名	姓	ハンドルネーム
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

ストライプ列

テーブル列にシマウマの縞模様を追加するには、`.table-striped-columns`を使用します。

#	名	姓	ハンドルネーム
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

これらのクラスはテーブルバリアントにも追加できます

#	名	姓	ハンドルネーム
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

#	名	姓	ハンドルネーム
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

#	名	姓	ハンドルネーム
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

#	名	姓	ハンドルネーム
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

ホバー可能な行

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

#	名	姓	ハンドルネーム
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

#	名	姓	ハンドルネーム
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

<table class="table table-dark table-hover">
  ...
</table>

これらのホバー可能な行は、ストライプ行バリアントと組み合わせることもできます

#	名	姓	ハンドルネーム
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

アクティブテーブル

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

#	名	姓	ハンドルネーム
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

<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">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

#	名	姓	ハンドルネーム
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

<table class="table table-dark">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

バリアントとアクセント付きテーブルの仕組み

アクセント付きテーブル（ストライプ行、ストライプ列、ホバー可能な行、およびアクティブテーブル）の場合、これらの効果がすべてのテーブルバリアントで機能するように、いくつかの手法を使用しました

まず、` --bs-table-bg`カスタムプロパティを使用してテーブルセルの背景を設定します。次に、すべてのテーブルバリアントでそのカスタムプロパティを設定して、テーブルセルに色を付けます。こうすることで、半透明の色がテーブルの背景として使用されている場合に問題が発生することはありません。
次に、` box-shadow：inset 0 0 0 9999px var(--bs-table-bg-state、var(--bs-table-bg-type、var(--bs-table-accent-bg)));`を使用して、テーブルセルにインセットボックスシャドウを追加します。指定された` `background-color ``の上にレイヤー化します。CSSの特異性にかかわらず、カスタムカスケードを使用して` `box-shadow` `をオーバーライドします。巨大なスプレッドとぼかしを使用しないため、色は単色になります。` --bs-table-accent-bg`はデフォルトで` `transparent` `に設定されているため、デフォルトのボックスシャドウはありません。
`.table-striped`、`.table-striped-columns`、`.table-hover`、または`.table-active`クラスを追加すると、` --bs-table-bg-type`または` --bs-table-bg-state`（デフォルトでは` `initial` `に設定）が半透明の色（` --bs-table-striped-bg`、` --bs-table-active-bg`、または` --bs-table-hover-bg`）に設定され、背景に色が付けられ、デフォルトの` --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));
    $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-bordered`を追加します。

#	名	姓	ハンドルネーム
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

色を変更するには、境界線の色ユーティリティを追加できます

#	名	姓	ハンドルネーム
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

境界線なしテーブル

境界線なしのテーブルを追加するには、`.table-borderless`を追加します。

#	名	姓	ハンドルネーム
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

#	名	姓	ハンドルネーム
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

<table class="table table-dark table-borderless">
  ...
</table>

小さなテーブル

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

#	名	姓	ハンドルネーム
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

#	名	姓	ハンドルネーム
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

<table class="table table-dark table-sm">
  ...
</table>

テーブルグループの区切り線

`.table-group-divider`を使用して、テーブルグループ（` `<thead>` `、` `<tbody>` `、および` `<tfoot>` `）の間に、より太く暗い境界線を追加します。` `border-top-color` `（現在、ユーティリティクラスを提供していません）を変更することで、色をカスタマイズします。

#	名	姓	ハンドルネーム
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

html

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody class="table-group-divider">
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

垂直方向の配置

` `<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">This cell is aligned to the top.</td>
        <td>...</td>
      </tr>
    </tbody>
  </table>
</div>

ネスト

境界線スタイル、アクティブスタイル、およびテーブルバリアントは、ネストされたテーブルによって継承されません。

名

姓

ハンドルネーム

Mark

Otto

@mdo

ヘッダー	ヘッダー	ヘッダー
A	名	姓
B	名	姓
C	名	姓

Larry

the Bird

@twitter

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

ネストの仕組み

ネストされたテーブルへのスタイルの漏れを一切防ぐために、CSSでは子結合子（>）セレクターを使用しています。 thead、tbody、tfoot 内のすべての td と th をターゲットにする必要があるため、これがないとセレクターが非常に長くなってしまいます。そのため、.table > :not(caption) > * > * という少し変わったセレクターを使用して、.table のすべての td と th をターゲットにしつつ、ネストされたテーブルの要素はターゲットに含めないようにしています。

テーブルの直接の子として <tr> を追加すると、それらの <tr> はデフォルトで <tbody> で囲まれるため、セレクターは意図したとおりに機能することに注意してください。

構造

テーブルヘッダー

テーブルやダークテーブルと同様に、.table-light または .table-dark 修飾子クラスを使用して、<thead> を明るいグレーまたは暗いグレーで表示します。

#	名	姓	ハンドルネーム
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

#	名	姓	ハンドルネーム
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

テーブルフッター

#	名	姓	ハンドルネーム
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter
フッター	フッター	フッター	フッター

<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

キャプション

<caption> は、テーブルの見出しのように機能します。スクリーンリーダーを使用するユーザーがテーブルを見つけ、その内容を理解し、読むかどうかを判断するのに役立ちます。

ユーザー一覧
#	名	姓	ハンドルネーム
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

.caption-top を使用して、<caption> をテーブルの上部に配置することもできます。

ユーザー一覧
#	名	姓	ハンドルネーム
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

html

<table class="table caption-top">
  <caption>List of users</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

レスポンシブテーブル

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

垂直方向のクリッピング/切り捨て

レスポンシブテーブルは overflow-y: hidden を使用しており、テーブルの上端または下端を超えるコンテンツを切り取ります。特に、ドロップダウンメニューやその他のサードパーティウィジェットが切り取られる可能性があります。

常にレスポンシブ

すべてのブレークポイントで、水平方向にスクロールするテーブルに .table-responsive を使用します。

#	見出し	見出し	見出し	見出し	見出し	見出し	見出し	見出し	見出し
1	セル	セル	セル	セル	セル	セル	セル	セル	セル
2	セル	セル	セル	セル	セル	セル	セル	セル	セル
3	セル	セル	セル	セル	セル	セル	セル	セル	セル

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

ブレークポイント指定

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

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

#	見出し	見出し	見出し	見出し	見出し	見出し	見出し	見出し
1	セル	セル	セル	セル	セル	セル	セル	セル
2	セル	セル	セル	セル	セル	セル	セル	セル
3	セル	セル	セル	セル	セル	セル	セル	セル

#	見出し	見出し	見出し	見出し	見出し	見出し	見出し	見出し
1	セル	セル	セル	セル	セル	セル	セル	セル
2	セル	セル	セル	セル	セル	セル	セル	セル
3	セル	セル	セル	セル	セル	セル	セル	セル

#	見出し	見出し	見出し	見出し	見出し	見出し	見出し	見出し
1	セル	セル	セル	セル	セル	セル	セル	セル
2	セル	セル	セル	セル	セル	セル	セル	セル
3	セル	セル	セル	セル	セル	セル	セル	セル

#	見出し	見出し	見出し	見出し	見出し	見出し	見出し	見出し
1	セル	セル	セル	セル	セル	セル	セル	セル
2	セル	セル	セル	セル	セル	セル	セル	セル
3	セル	セル	セル	セル	セル	セル	セル	セル

#	見出し	見出し	見出し	見出し	見出し	見出し	見出し	見出し
1	セル	セル	セル	セル	セル	セル	セル	セル
2	セル	セル	セル	セル	セル	セル	セル	セル
3	セル	セル	セル	セル	セル	セル	セル	セル

#	見出し	見出し	見出し	見出し	見出し	見出し	見出し	見出し
1	セル	セル	セル	セル	セル	セル	セル	セル
2	セル	セル	セル	セル	セル	セル	セル	セル
3	セル	セル	セル	セル	セル	セル	セル	セル

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

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

<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-xxl">
  <table class="table">
    ...
  </table>
</div>

CSS

Sass変数

scss/_variables.scss

$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}emphasis-color);
$table-bg:                    var(--#{$prefix}body-bg);
$table-accent-bg:             transparent;

$table-th-font-weight:        null;

$table-striped-color:         $table-color;
$table-striped-bg-factor:     .05;
$table-striped-bg:            rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor);

$table-active-color:          $table-color;
$table-active-bg-factor:      .1;
$table-active-bg:             rgba(var(--#{$prefix}emphasis-color-rgb), $table-active-bg-factor);

$table-hover-color:           $table-color;
$table-hover-bg-factor:       .075;
$table-hover-bg:              rgba(var(--#{$prefix}emphasis-color-rgb), $table-hover-bg-factor);

$table-border-factor:         .2;
$table-border-width:          var(--#{$prefix}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:         var(--#{$prefix}secondary-color);

$table-bg-scale:              -80%;

Sassループ

scss/_variables.scss

$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,
);

カスタマイズ

係数変数（$table-striped-bg-factor、$table-active-bg-factor、$table-hover-bg-factor）は、テーブルのバリアントのコントラストを決定するために使用されます。
ライトテーブルとダークテーブルのバリアント以外に、テーマカラーは $table-bg-scale 変数によって明るくなります。