ブートストラップ4テーブル

ブートストラップ4基本テーブル

基本的なBootstrap4テーブルには、軽いパッドと水平方向の仕切りがあります。

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

例

Firstname	Lastname	Email
John	Doe	[email protected]
Mary	Moe	[email protected]
July	Dooley	[email protected]

縞模様の列

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

例

Firstname	Lastname	Email
John	Doe	[email protected]
Mary	Moe	[email protected]
July	Dooley	[email protected]

ボーダーテーブル

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

例

Firstname	Lastname	Email
John	Doe	[email protected]
Mary	Moe	[email protected]
July	Dooley	[email protected]

行をホバーします

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

例

Firstname	Lastname	Email
John	Doe	[email protected]
Mary	Moe	[email protected]
July	Dooley	[email protected]

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

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

例

Firstname	Lastname	Email
John	Doe	[email protected]
Mary	Moe	[email protected]
July	Dooley	[email protected]

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

組み合わせ.table-darkて.table-striped、暗い縞模様のテーブルを作成します。

例

Firstname	Lastname	Email
John	Doe	[email protected]
Mary	Moe	[email protected]
July	Dooley	[email protected]

ホバブルダークテーブル

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

例

Firstname	Lastname	Email
John	Doe	[email protected]
Mary	Moe	[email protected]
July	Dooley	[email protected]

ボーダレステーブル

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

例

Firstname	Lastname	Email
John	Doe	[email protected]
Mary	Moe	[email protected]
July	Dooley	[email protected]

コンテキストクラス

コンテキストクラスを使用して、テーブル全体（<table>）、テーブル行（<tr>）、またはテーブルセル（<td>）に色を付けることができます。

例

Firstname	Lastname	Email
Default	Defaultson	[email protected]
Primary	Joe	[email protected]
Success	Doe	[email protected]
Danger	Moe	[email protected]
Info	Dooley	[email protected]
Warning	Refs	[email protected]
Active	Activeson	[email protected]
Secondary	Secondson	[email protected]
Light	Angie	[email protected]
Dark	Bo	[email protected]

使用できるコンテキストクラスは次のとおりです。

クラス	説明
`.table-primary`	青：重要なアクションを示します
`.table-success`	緑：成功または前向きな行動を示します
`.table-danger`	赤：危険または潜在的に否定的な行動を示します
`.table-info`	水色：中立的な有益な変更またはアクションを示します
`.table-warning`	オレンジ：注意が必要な可能性のある警告を示します
`.table-active`	灰色：テーブルの行またはテーブルのセルにホバーカラーを適用します
`.table-secondary`	灰色：少し重要性の低いアクションを示します
`.table-light`	明るい灰色のテーブルまたはテーブル行の背景
`.table-dark`	濃い灰色のテーブルまたはテーブル行の背景

テーブルヘッドの色

.thead-darkクラスはテーブルヘッダーに黒い背景を追加し、クラス.thead-lightはテーブルヘッダーに灰色の背景を追加します。

例

Firstname	Lastname	Email
John	Doe	[email protected]
Mary	Moe	[email protected]
July	Dooley	[email protected]

Firstname	Lastname	Email
John	Doe	[email protected]
Mary	Moe	[email protected]
July	Dooley	[email protected]

小さいテーブル

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

例

Firstname	Lastname	Email
John	Doe	[email protected]
Mary	Moe	[email protected]
July	Dooley	[email protected]

レスポンシブテーブル

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

例

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

クラス	画面幅
`.table-responsive-sm`	<576px
`.table-responsive-md`	<768px
`.table-responsive-lg`	<992px
`.table-responsive-xl`	<1200px

例

❮ 前次 ❯

ブートストラップ4チュートリアル

ブートストラップ4グリッド

ブートストラップ4その他

ブートストラップ4Ref