Skip to main content Skip to docs navigation
View on GitHub

テーブル Tables

カレンダーや日付ピッカーなどのサードパーティウィジェット全体でのテーブル要素の広範な使用を考慮して、Bootstrapのテーブルのオプトインスタイリングに関するドキュメントと例です。

On this page

概要

カレンダーや日付ピッカーなどのサードパーティウィジェット全体での<table>要素の広範な使用により、Bootstrapのテーブルはオプトインです。ベースクラス.tableを任意の<table>に追加し、オプションのモディファイアクラスまたはカスタムスタイルで拡張します。すべてのテーブルスタイルはBootstrapで継承されないため、ネストされたテーブルは親から独立してスタイル設定できます。

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

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<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>John</td>
      <td>Doe</td>
      <td>@social</td>
    </tr>
  </tbody>
</table>

バリエーション

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

注意! より複雑なCSSを使用してテーブルバリエーションを生成するため、v6までカラーモード適応スタイリングが表示されない可能性があります。

ClassHeadingHeading
DefaultCellCell
PrimaryCellCell
SecondaryCellCell
SuccessCellCell
DangerCellCell
WarningCellCell
InfoCellCell
LightCellCell
DarkCellCell
<!-- 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クラスで非表示にした追加テキストなどの代替手段を通じて含めてください。

アクセント付きテーブル

ストライプ行

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

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-striped">
  ...
</table>

ストライプ列

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

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-striped-columns">
  ...
</table>

これらのクラスは、テーブルバリエーションにも追加できます:

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-dark table-striped">
  ...
</table>
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-dark table-striped-columns">
  ...
</table>
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-success table-striped">
  ...
</table>
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-success table-striped-columns">
  ...
</table>

ホバー可能な行

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

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-hover">
  ...
</table>
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-dark table-hover">
  ...
</table>

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

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-striped table-hover">
  ...
</table>

アクティブテーブル

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

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>John</td>
      <td>Doe</td>
      <td class="table-active">@social</td>
    </tr>
  </tbody>
</table>
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-dark">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>John</td>
      <td>Doe</td>
      <td class="table-active">@social</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を追加します。

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-bordered">
  ...
</table>

境界線カラーユーティリティを追加して、色を変更できます:

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-bordered border-primary">
  ...
</table>

境界線なしテーブル

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

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-borderless">
  ...
</table>
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-dark table-borderless">
  ...
</table>

小さいテーブル

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

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-sm">
  ...
</table>
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-dark table-sm">
  ...
</table>

テーブルグループディバイダー

テーブルグループ—<thead>、<tbody>、<tfoot>—の間に、.table-group-dividerでより厚く、より暗い境界線を追加します。border-top-colorを変更することで色をカスタマイズします(現時点ではユーティリティクラスを提供していません)。

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social
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>John</td>
      <td>Doe</td>
      <td>@social</td>
    </tr>
  </tbody>
</table>

垂直配置

<thead>のテーブルセルは常に下部に垂直配置されます。<tbody>のテーブルセルは<table>から配置を継承し、デフォルトで上部に配置されます。必要に応じて垂直配置クラスを使用して再配置します。

Heading 1 Heading 2 Heading 3 Heading 4
This cell inherits vertical-align: middle; from the table This cell inherits vertical-align: middle; from the table This cell inherits vertical-align: middle; from the table This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
This cell inherits vertical-align: bottom; from the table row This cell inherits vertical-align: bottom; from the table row This cell inherits vertical-align: bottom; from the table row This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
This cell inherits vertical-align: middle; from the table This cell inherits vertical-align: middle; from the table This cell is aligned to the top. This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells. 
<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>

ネスティング

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

# First Last Handle
1 Mark Otto @mdo
Header Header Header
A First Last
B First Last
C First Last
3 John Doe @social 
<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>を明るいまたはダークグレーに表示します。

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

テーブルフット

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social
Footer Footer Footer Footer 
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

キャプション

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

List of users
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social 
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

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

List of users
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 John Doe @social
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>John</td>
      <td>Doe</td>
      <td>@social</td>
    </tr>
  </tbody>
</table>

レスポンシブテーブル

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

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

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

常にレスポンシブ

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

# Heading Heading Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell Cell 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

ブレークポイント固有

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

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

#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCell
3CellCellCellCellCellCellCellCell
#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCell
3CellCellCellCellCellCellCellCell
#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCell
3CellCellCellCellCellCellCellCell
#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCell
3CellCellCellCellCellCellCellCell
#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCell
3CellCellCellCellCellCellCellCell
#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCell
3CellCellCellCellCellCellCellCell
<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}body-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($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:          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変数によって明るくなります。