Bootststrap 5 フォーム

基本的な形式

少しのパディングと水平方向の仕切りを備えた基本的な Bootstrap 5 テーブル。

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

例

自分で試してみてください

ストライプ行

.table-striped クラスは、テーブルにゼブラ ストライプを追加します。

例

自分で試してみてください

枠線付きの表

.table-border クラスは、テーブルとセルのすべての側面に枠線を追加します。

例

自分で試してみてください

ホバー効果のある行

.table-hover クラスは、テーブル行にホバー効果 (灰色の背景色) を追加します。

例

自分で試してみてください

ブラック/ダークテーブル

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

例

自分で試してみてください

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

.table-dark と .table-striped を組み合わせて、ダーク ストライプ テーブルを作成します。

例

自分で試してみてください

ホバリング可能なダークテーブル

.table-hover クラスは、テーブル行にホバー効果 (灰色の背景色) を追加します。

例

自分で試してみてください

ボーダーレステーブル

.table-borderless クラスは、テーブルから境界線を削除します。

例

自分で試してみてください

コンテキスト クラス

コンテキスト クラスを使用すると、テーブル全体 (<table>)、テーブル行 (<tr>)、または色付け用の表のセル (<td>)。

例

自分で試してみてください

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

ヘッダーの色

任意のコンテキスト クラスを使用して、テーブル ヘッダーだけに背景色を追加することもできます。

例

自分で試してみてください

小さなテーブル

.table-sm クラスは、セルのパディングを半​​分にすることでテーブルを小さくします。

例

自分で試してみてください

レスポンシブフォーム

.table-sensitive クラスは、必要に応じて（水平方向に大きすぎる場合）テーブルにスクロールバーを追加します。

例

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

自分で試してみてください

画面の幅に応じて、テーブルにスクロールバーを表示するタイミングを決定することもできます。

例

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

自分で試してみてください