Bootstrap シート

Bootstrap 表格

このドキュメントでは、Bootstrap でテーブルを使用およびカスタマイズする方法について詳しく説明します。

目次

  1. 使い方
  2. テーブルのバリエーション
  3. テーブルの色
  4. テーブルのタイトル
  5. テーブルのネスト
  6. レスポンシブテーブル
  7. まとめ
  8. よくある質問

1. 使い方

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 colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

テーブルのヘッダー、ボディ、フッター、行、ヘッダーセル、データセルを作成するには、それぞれ <thead>、<tbody>、<tfooter>、<tr>、<th>、<td> 要素を使用します。

2. テーブルのバリエーション

Bootstrap は、さまざまなスタイルのテーブルを作成するためのクラスを提供しています。

  • .table-sm: 小さなテーブルを作成します。
  • .table-responsive: レスポンシブテーブルを作成し、小さな画面でスクロールできるようにします。
  • .table-dark: 暗いテーブルを作成します。
  • .table-striped: ストライプテーブルを作成します。
  • .table-hover: ホバー効果を追加します。
  • .table-bordered: 境界線を追加します。
  • .table-borderless: 境界線なしのテーブルを作成します。

3. テーブルの色

Bootstrap のカラーユーティリティクラスを使用して、テーブルの行またはセルに背景色とテキストの色を追加できます。

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

4. テーブルのタイトル

.caption-top および .caption-bottom クラスを使用して、テーブルタイトルの位置を制御できます。

<table class="table">
  <caption class="caption-top">Table caption on top</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

5. テーブルのネスト

テーブルをネストして、より複雑なテーブル構造を作成できます。

<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    <tr>
      <td>
        <table class="table">
          ...
        </table>
      </td>
    </tr>
  </tbody>
</table>

6. レスポンシブテーブル

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

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

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

<table class="table table-responsive-sm">
  ...
</table>

7. まとめ

このドキュメントでは、Bootstrap テーブルの基本構造、スタイルバリアント、レスポンシブレイアウトなど、Bootstrap テーブルの使用方法について包括的に説明しました。開発者は、このドキュメントを参照して、機能豊富で美しいテーブルを簡単に作成できます。

よくある質問

  1. テーブルにストライプを追加するにはどうすればよいですか？
    .table-striped クラスをテーブルに追加します。
  2. 小さな画面でテーブルをレスポンシブにするにはどうすればよいですか？
    .table-responsive クラスをテーブルを囲むコンテナに追加するか、特定のブレークポイントで .table-responsive{-sm|-md|-lg|-xl|-xxl} クラスを使用します。
  3. テーブルに境界線を追加するにはどうすればよいですか？
    .table-bordered クラスをテーブルに追加します。