Source

テーブル

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

例

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

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

# 初め 最後 扱う
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>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

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

# 初め 最後 扱う
1 マーク オットー @mdo
2 ジェイコブ ソーントン @太い
3 ラリー 鳥 @ツイッター 
<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 ジェイコブ ソーントン @太い
3 ラリー 鳥 @ツイッター
# 初め 最後 扱う
1 マーク オットー @mdo
2 ジェイコブ ソーントン @太い
3 ラリー 鳥 @ツイッター 
<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 ジェイコブ ソーントン @太い
3 ラリー 鳥 @ツイッター 
<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 ジェイコブ ソーントン @太い
3 ラリー 鳥 @ツイッター 
<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 ジェイコブ ソーントン @太い
3 鳥のラリー @ツイッター 
<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 ジェイコブ ソーントン @太い
3 鳥のラリー @ツイッター 
<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-hover内の表の行でホバー状態を有効にするために追加します<tbody>。

# 初め 最後 扱う
1 マーク オットー @mdo
2 ジェイコブ ソーントン @太い
3 鳥のラリー @ツイッター 
<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 ジェイコブ ソーントン @太い
3 鳥のラリー @ツイッター 
<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 ジェイコブ ソーントン @太い
3 鳥のラリー @ツイッター 
<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 ジェイコブ ソーントン @太い
3 鳥のラリー @ツイッター 
<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色で示される情報が、コンテンツ自体 (表示されるテキストなど) から明らかであるか、クラスで非表示の追加テキストなどの代替手段によって含まれていることを確認してください。

.tableanyをでラップしてレスポンシブ テーブルを作成.table-responsive{-sm|-md|-lg|-xl}し、テーブルを各max-widthブレークポイントでそれぞれ最大 576px、768px、992px、および 1120px まで水平にスクロールします。

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

キャプション

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

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