GitHub で表示

テーブル

Bootstrap を使用したテーブルの (JavaScript プラグインで広く使用されていることを考慮し) オプトイン スタイルのドキュメントとサンプルです。

サンプル

カレンダーや日付ピッカーなどのサードパーティ製ウィジェットでテーブルが広く使用されているため、テーブルはオプトインになるように設計しました。任意の<table>にベースクラス.tableを追加し、カスタムスタイルまたはさまざまな付属のモディファイヤークラスで拡張するだけです。

最も基本的なテーブルマークアップを使用して、Bootstrap で.tableベースのテーブルがどのように表示されるかを以下に示します。すべてのテーブルスタイルは Bootstrap 4 で継承されます。つまり、ネストされたテーブルは親テーブルと同じようにスタイル設定されます。

# 最初 最後 ハンドル
1 マーク オットー @mdo
2 ジェイコブ ソーントン @fat
3 ラリー ザ・バード @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>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

.table-darkを使用して、濃い背景に明るいテキストで色を反転することもできます。

# 最初 最後 ハンドル
1 マーク オットー @mdo
2 ジェイコブ ソーントン @fat
3 ラリー ザ・バード @twitter 
<table class="table table-dark">
  <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>

テーブルヘッダーのオプション

テーブルや濃いテーブルと同様に、モディファイアークラス.thead-lightまたは.thead-darkを使用して、<thead>を明るい灰色または濃い灰色で表示します。

# 最初 最後 ハンドル
1 マーク オットー @mdo
2 ジェイコブ ソーントン @fat
3 ラリー ザ・バード @twitter
# 最初 最後 ハンドル
1 マーク オットー @mdo
2 ジェイコブ ソーントン @fat
3 ラリー ザ・バード @twitter 
<table class="table">
  <thead class="thead-dark">
    <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 class="table">
  <thead class="thead-light">
    <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-stripedを使用して、<tbody>内の任意のテーブル行にゼブラストライプを追加します。

# 最初 最後 ハンドル
1 マーク オットー @mdo
2 ジェイコブ ソーントン @fat
3 ラリー ザ・バード @twitter 
<table class="table table-striped">
  <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>
# 最初 最後 ハンドル
1 マーク オットー @mdo
2 ジェイコブ ソーントン @fat
3 ラリー ザ・バード @twitter 
<table class="table table-striped table-dark">
  <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-borderedを追加します。

# 最初 最後 ハンドル
1 マーク オットー @mdo
2 ジェイコブ ソーントン @fat
3 ラリー・ザ・バード @twitter 
<table class="table table-bordered">
  <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>
# 最初 最後 ハンドル
1 マーク オットー @mdo
2 ジェイコブ ソーントン @fat
3 ラリー・ザ・バード @twitter 
<table class="table table-bordered table-dark">
  <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>

ボーダーレステーブル

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

# 最初 最後 ハンドル
1 マーク オットー @mdo
2 ジェイコブ ソーントン @fat
3 ラリー・ザ・バード @twitter 
<table class="table table-borderless">
  <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>

.table-borderlessは、濃いテーブルにも使用できます。

# 最初 最後 ハンドル
1 マーク オットー @mdo
2 ジェイコブ ソーントン @fat
3 ラリー・ザ・バード @twitter 
<table class="table table-borderless table-dark">
  <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>

ホバー可能な行

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

# 最初 最後 ハンドル
1 マーク オットー @mdo
2 ジェイコブ ソーントン @fat
3 ラリー・ザ・バード @twitter 
<table class="table table-hover">
  <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>
# 最初 最後 ハンドル
1 マーク オットー @mdo
2 ジェイコブ ソーントン @fat
3 ラリー・ザ・バード @twitter 
<table class="table table-hover table-dark">
  <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>

小型テーブル

セルパディングを半分に減らしてテーブルをよりコンパクトにするには、.table-smを追加します。

# 最初 最後 ハンドル
1 マーク オットー @mdo
2 ジェイコブ ソーントン @fat
3 ラリー・ザ・バード @twitter 
<table class="table table-sm">
  <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>
# 最初 最後 ハンドル
1 マーク オットー @mdo
2 ジェイコブ ソーントン @fat
3 ラリー・ザ・バード @twitter 
<table class="table table-sm table-dark">
  <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 rows -->
<tr class="table-active">...</tr>
<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-active">...</td>
  <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>

通常のテーブル背景のバリアントは濃いテーブルでは使用できませんが、テキストまたは背景ユーティリティを使用して同様のスタイルを実現できます。

# 見出し 見出し
1 セル セル
2 セル セル
3 セル セル
4 セル セル
5 セル セル
6 セル セル
7 セル セル
8 セル セル
9 セル セル 
<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</td>
</tr>
支援技術への意味の伝達

意味を追加するために色を使用すると、視覚的な表示のみが提供されます。これは、スクリーンリーダーなどの支援技術のユーザーには伝わりません。色で示される情報が、コンテンツ自体（表示されるテキストなど）から明らかであるか、.sr-onlyクラスで非表示になっている追加テキストなど、代替手段を通じて含まれていることを確認してください。

任意の.tableを.table-responsive{-sm|-md|-lg|-xl}でラップすることにより、レスポンシブテーブルを作成します。テーブルは、それぞれ最大幅が 576px、768px、992px、1120px (これらを含まない) の各max-widthブレークポイントで水平方向にスクロールします。

ブラウザは現在範囲コンテキストクエリをサポートしていないため、min-およびmax-プレフィックスと小数幅のビューポート (たとえば、高 dpi デバイスの特定の条件下で発生する可能性がある) の制限を回避します。これらの比較には、より高い精度を持つ値を使用します。

キャプション

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

ユーザーリスト
# 最初 最後 ハンドル
1 マーク オットー @mdo
2 ジェイコブ ソーントン @fat
3 ラリー ザ・バード @twitter 
<table class="table">
  <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}を使用して、レスポンシブテーブルを持つ最大ブレークポイントを選択します。

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

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

常にレスポンシブ

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

# 見出し 見出し 見出し 見出し 見出し 見出し 見出し 見出し 見出し
1 セル セル セル セル セル セル セル セル セル
2 セル セル セル セル セル セル セル セル セル
3 セル セル セル セル セル セル セル セル セル 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

ブレークポイント固有

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

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

# 見出し 見出し 見出し 見出し 見出し 見出し 見出し 見出し
1 セル セル セル セル セル セル セル セル
2 セル セル セル セル セル セル セル セル
3 セル セル セル セル セル セル セル セル
# 見出し 見出し 見出し 見出し 見出し 見出し 見出し 見出し
1 セル セル セル セル セル セル セル セル
2 セル セル セル セル セル セル セル セル
3 セル セル セル セル セル セル セル セル
# 見出し 見出し 見出し 見出し 見出し 見出し 見出し 見出し
1 セル セル セル セル セル セル セル セル
2 セル セル セル セル セル セル セル セル
3 セル セル セル セル セル セル セル セル
# 見出し 見出し 見出し 見出し 見出し 見出し 見出し 見出し
1 セル セル セル セル セル セル セル セル
2 セル セル セル セル セル セル セル セル
3 セル セル セル セル セル セル セル セル 
<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>