Bootstrap5 シート

Tables

Bootstrap のカスタムクラスを使用して、テーブルのスタイルをすばやく設定します。

使い方

基本的なテーブルスタイルを任意の <table> に適用するには、.table クラスを使用します。

<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>

バリエーション

5つのテーブルバリアントクラスを紹介します。.table-striped（縞模様）、.table-hover（ホバー時のハイライト）、.table-active（アクティブな行）、.table-primary（プライマリカラー）、.table-secondary（セカンダリカラー）と、コンテキストカラークラスと組み合わせて使用する方法について説明します。

.table-striped

すべての偶数行（tbody>tr）に縞模様の背景色を追加します。

<table class="table table-striped">
  <!-- テーブルの内容 -->
</table>

.table-hover

マウスホバーでテーブルの行（tbody>tr）の背景色を変更します。

<table class="table table-hover">
  <!-- テーブルの内容 -->
</table>

.table-active

テーブルの行またはセルをアクティブ（または選択済み）として強調表示します。

<table class="table">
  <tbody>
    <tr>
      <!-- テーブルの内容 -->
    </tr>
    <tr class="table-active">
      <!-- テーブルの内容 -->
    </tr>
    <tr>
      <!-- テーブルの内容 -->
    </tr>
  </tbody>
</table>

コンテキストカラー

.table-* コンテキストカラークラスを使用して、テーブルの行またはセルを強調表示します。

<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 class="table-primary">
      <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 class="table-secondary">
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

テーブルヘッダー

.table-light または .table-dark クラスを使用して、テーブルヘッダーに明るいまたは暗い背景色を追加します。

<table class="table">
  <thead class="table-light">
    <!-- テーブルヘッダーの内容 -->
  </thead>
  <tbody>
    <!-- テーブルの内容 -->
  </tbody>
</table>

テーブルフッター

<tfoot> 要素を使用して、テーブルフッターを作成します。

<table class="table">
  <thead>
    <!-- テーブルヘッダーの内容 -->
  </thead>
  <tbody>
    <!-- テーブルの内容 -->
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4">テーブルフッター</td>
    </tr>
  </tfoot>
</table>

レスポンシブテーブル

.table-responsive クラスを使用して、小さな画面で水平スクロールするレスポンシブテーブルを作成します。

<div class="table-responsive">
  <table class="table">
    <!-- テーブルの内容 -->
  </table>
</div>

特定のブレークポイントに対してレスポンシブテーブルを作成するには、.table-responsive{-sm|-md|-lg|-xl|-xxl} クラスを使用します。

<div class="table-responsive-sm">
  <!-- 小さなブレークポイント用のテーブル -->
</div>

<div class="table-responsive-md">
  <!-- 中くらいのブレークポイント用のテーブル -->
</div>

<!-- など -->

Sass

Sass変数、マップ、ミキシン、およびテーブルスタイルのカスタマイズに使用する方法について説明します。

詳細については、https://getbootstrap.jp/docs/5.0/content/tables/ を参照してください。

Q&A

Bootstrap 5のテーブルで、特定のセルに色を付けるにはどうすればよいですか？

.table-* コンテキストカラークラスを使用して、特定のセルに色を付けることができます。たとえば、<td class="table-primary"> は、セルをプライマリカラーで強調表示します。

レスポンシブテーブルとは何ですか？

レスポンシブテーブルとは、小さな画面サイズでも見やすく、スクロールせずに表示できるテーブルのことです。Bootstrap 5では、.table-responsive クラスを使用してレスポンシブテーブルを作成できます。

テーブルに独自のスタイルを追加するにはどうすればよいですか？

独自のCSSクラスを作成し、それをテーブルまたはテーブルセルに適用することで、独自のスタイルを追加できます。また、Sass変数やミキシンを使用して、Bootstrapのデフォルトスタイルをオーバーライドすることもできます。