Bootstrap 5 テーブル

基本的なテーブル

基本的な Bootstrap 5 テーブルは少し内側の余白があり、水平な区切り線があります。

.table クラスがテーブルに基本的なスタイルを追加します：

例

自分で試してみる

ストライプ行

.table-striped クラスがテーブルにザメストライプを追加します：

例

自分で試してみる

枠線付きテーブル

.table-bordered クラスがテーブルとセルのすべての辺に枠線を追加します：

例

自分で試してみる

ホバー効果のある行

.table-hover クラスがテーブル行にホバー効果（グレーの背景色）を追加します：

例

自分で試してみる

黒い/ダークテーブル

.table-dark クラスがテーブルに黒い背景を追加します：

例

自分で試してみる

ダークストライプテーブル

結合 .table-dark および .table-striped ダークストライプテーブルを作成するために：

例

自分で試してみる

ホバー可能なダークテーブル

.table-hover クラスがテーブル行にホバー効果（グレーの背景色）を追加します：

例

自分で試してみる

枠線のないテーブル

.table-borderless テーブルから枠線を削除します：

例

自分で試してみる

コンテキストクラス

コンテキストクラスは、全体のテーブル (<table>)、テーブル行 (<tr>) やテーブルセル (<td>) カラリング。

例

自分で試してみる

利用可能なコンテキストクラス：

クラス 説明
.table-primary 青：重要なアクションを示します。
.table-success 緑：成功やポジティブなアクションを示します。
.table-danger 赤：危険や潜在的なネガティブな行動を示します。
.table-info 薄い青：中性的な情報の変更や操作を示します。
.table-warning オレンジ：注意が必要な警告を示します。
.table-active グレー：テーブル行やテーブルセルにホバー色を適用します。
.table-secondary グレー：重要でないアクションを示します。
.table-light 薄いグレーのテーブルやテーブル行の背景。
.table-dark 濃いグレーのテーブルやテーブル行の背景。

ヘッダーの色

テーブルのヘッダーに背景色を追加するために、どのコンテキストクラスも使用できます：

例

自分で試してみる

小さなテーブル

.table-sm クラスはセルのフィルルムを半分にすることでテーブルを小さくします：

例

自分で試してみる

レスポンシブテーブル

.table-responsive 必要に応じてテーブルにスクロールバーを追加するクラス（水平方向が大きすぎる場合）：

例

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

自分で試してみる

スクリーン幅に応じてテーブルにスクロールバーを追加するタイミングを決定できます：

クラス スクリーン幅
.table-responsive-sm < 576px
.table-responsive-md < 768px
.table-responsive-lg < 992px
.table-responsive-xl < 1200px
.table-responsive-xxl < 1400px

例

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

自分で試してみる