メインコンテンツにスキップ ドキュメント ナビゲーションにスキップ
in English

テーブル

Bootstrap を使用したテーブルのオプトイン スタイル設定 (JavaScript プラグインで一般的に使用されている場合) のドキュメントと例。

このページでは

概要

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

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

# 初め 最後 扱う
1 マーク オットー @mdo
2 ジェイコブ ソーントン @太い
3 鳥のラリー @ツイッター 
<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>

バリアント

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

クラス 見出し 見出し
デフォルト 細胞 細胞
主要な 細胞 細胞
セカンダリ 細胞 細胞
成功 細胞 細胞
危険 細胞 細胞
警告 細胞 細胞
情報 細胞 細胞
光 細胞 細胞
暗い 細胞 細胞 
<!-- 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>。

# 初め 最後 扱う
1 マーク オットー @mdo
2 ジェイコブ ソーントン @太い
3 鳥のラリー @ツイッター 
<table class="table table-striped">
  ...
</table>

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

# 初め 最後 扱う
1 マーク オットー @mdo
2 ジェイコブ ソーントン @太い
3 鳥のラリー @ツイッター 
<table class="table table-dark table-striped">
  ...
</table>
# 初め 最後 扱う
1 マーク オットー @mdo
2 ジェイコブ ソーントン @太い
3 鳥のラリー @ツイッター 
<table class="table table-success table-striped">
  ...
</table>

ホバー可能な行

.table-hover内の表の行でホバー状態を有効にするために追加します<tbody>。

# 初め 最後 扱う
1 マーク オットー @mdo
2 ジェイコブ ソーントン @太い
3 鳥のラリー @ツイッター 
<table class="table table-hover">
  ...
</table>
# 初め 最後 扱う
1 マーク オットー @mdo
2 ジェイコブ ソーントン @太い
3 鳥のラリー @ツイッター 
<table class="table table-dark table-hover">
  ...
</table>

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

# 初め 最後 扱う
1 マーク オットー @mdo
2 ジェイコブ ソーントン @太い
3 鳥のラリー @ツイッター 
<table class="table table-striped table-hover">
  ...
</table>

アクティブなテーブル

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

# 初め 最後 扱う
1 マーク オットー @mdo
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">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# 初め 最後 扱う
1 マーク オットー @mdo
2 ジェイコブ ソーントン @太い
3 鳥のラリー @ツイッター 
<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-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は明るくなります。
  • テキストと境界線の色は同じ方法で生成され、それらの色はデフォルトで継承されます。

舞台裏では次のようになっています。

@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));

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

    color: $color;
    border-color: mix($color, $background, percentage($table-border-factor));
  }
}

表の罫線

縁取りテーブル

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

# 初め 最後 扱う
1 マーク オットー @mdo
2 ジェイコブ ソーントン @太い
3 鳥のラリー @ツイッター 
<table class="table table-bordered">
  ...
</table>

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

# 初め 最後 扱う
1 マーク オットー @mdo
2 ジェイコブ ソーントン @太い
3 鳥のラリー @ツイッター 
<table class="table table-bordered border-primary">
  ...
</table>

ボーダーのないテーブル

.table-borderlessボーダーなしのテーブルに追加します。

# 初め 最後 扱う
1 マーク オットー @mdo
2 ジェイコブ ソーントン @太い
3 鳥のラリー @ツイッター 
<table class="table table-borderless">
  ...
</table>
# 初め 最後 扱う
1 マーク オットー @mdo
2 ジェイコブ ソーントン @太い
3 鳥のラリー @ツイッター 
<table class="table table-dark table-borderless">
  ...
</table>

小さなテーブル

すべてのセルを半分にカットして、さらにコンパクト.table-smにするために追加します。.tablepadding

# 初め 最後 扱う
1 マーク オットー @mdo
2 ジェイコブ ソーントン @太い
3 鳥のラリー @ツイッター 
<table class="table table-sm">
  ...
</table>
# 初め 最後 扱う
1 マーク オットー @mdo
2 ジェイコブ ソーントン @太い
3 鳥のラリー @ツイッター 
<table class="table table-dark table-sm">
  ...
</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>

ネスティング

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

# 初め 最後 扱う
1 マーク オットー @mdo
ヘッダ ヘッダ ヘッダ
あ 初め 最後
B 初め 最後
ハ 初め 最後
3 ラリー 鳥 @ツイッター 
<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

ネスティングの仕組み

スタイルがネストされたテーブルに漏れるのを防ぐために>、CSS で子コンビネーター ( ) セレクターを使用します。、、およびのすべてtdの およびをターゲットにする必要があるため、セレクターはそれがないとかなり長く見えます。そのため、奇妙に見えるセレクターを使用して、 のすべての および をターゲットにしますが、ネストされた可能性のあるテーブルは対象としません。ththeadtbodytfoot.table > :not(caption) > * > *tdth.table

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

解剖学

テーブルヘッド

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

# 初め 最後 扱う
1 マーク オットー @mdo
2 ジェイコブ ソーントン @太い
3 ラリー 鳥 @ツイッター 
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# 初め 最後 扱う
1 マーク オットー @mdo
2 ジェイコブ ソーントン @太い
3 ラリー 鳥 @ツイッター 
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

テーブルの足

# 初め 最後 扱う
1 マーク オットー @mdo
2 ジェイコブ ソーントン @太い
3 ラリー 鳥 @ツイッター
フッター フッター フッター フッター 
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

キャプション

表の<caption>見出しのように機能します。スクリーン リーダーを使用しているユーザーが表を見つけて内容を理解し、読みたいかどうかを判断するのに役立ちます。

ユーザー一覧
# 初め 最後 扱う
1 マーク オットー @mdo
2 ジェイコブ ソーントン @太い
3 鳥のラリー @ツイッター 
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

<caption>をテーブルの上に置くこともできます.caption-top。

ユーザー一覧
# 初め 最後 扱う
1 マーク オットー @mdo
2 ジェイコブ ソーントン @太い
3 ラリー 鳥 @ツイッター 
<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>

サス

変数

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

$table-striped-order:         odd;

$table-group-separator-color: currentColor;

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

$table-bg-scale:              -80%;

ループ

$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-level変数によって明るくなります。