bootstrap4テーブル

HOME > bootstrap4テーブル

参考サイト

 

 

基本のtable

ライトコース26時間のライトコースです
スタンダードコース48時間のスタンダードコースです
プロフェッショナルコース80時間のプロフェッショナルコースです
マンツーマンレッスン単発の完全マンツーマンレッスンです
出張研修・コンサルティングお客様先で行う出張研修・コンサルティングです

 

「table」クラスに「table-striped」クラスをつけるとストライプになる

ライトコース26時間のライトコースです
スタンダードコース48時間のスタンダードコースです
プロフェッショナルコース80時間のプロフェッショナルコースです
マンツーマンレッスン単発の完全マンツーマンレッスンです
出張研修・コンサルティングお客様先で行う出張研修・コンサルティングです

 

「table」クラスに「table-bordered」クラスをつけるとセルの全てに枠線

ライトコース26時間のライトコースです
スタンダードコース48時間のスタンダードコースです
プロフェッショナルコース80時間のプロフェッショナルコースです
マンツーマンレッスン単発の完全マンツーマンレッスンです
出張研修・コンサルティングお客様先で行う出張研修・コンサルティングです

 

「table」クラスに「table-hover」クラスをつけるとマウスオーバーでハイライト

ライトコース26時間のライトコースです
スタンダードコース48時間のスタンダードコースです
プロフェッショナルコース80時間のプロフェッショナルコースです
マンツーマンレッスン単発の完全マンツーマンレッスンです
出張研修・コンサルティングお客様先で行う出張研修・コンサルティングです

 

「table」クラスに「table-sm」クラスをつけると行間が狭くなる

ライトコース26時間のライトコースです
スタンダードコース48時間のスタンダードコースです
プロフェッショナルコース80時間のプロフェッショナルコースです
マンツーマンレッスン単発の完全マンツーマンレッスンです
出張研修・コンサルティングお客様先で行う出張研修・コンサルティングです

 

tableレスポンシブ

「table」クラスを「table-responsive」で囲む

tableクラスに「text-nowrap」を指定することでtable全体のセルで折り返しをしない状態になる。

コース名 コース詳細
ライトコース26時間のライトコースです。26時間のライトコースです。
スタンダードコース48時間のスタンダードコースです。48時間のスタンダードコースです。
プロフェッショナルコース80時間のプロフェッショナルコースです。80時間のプロフェッショナルコースです
マンツーマンレッスン単発の完全マンツーマンレッスンです。単発の完全マンツーマンレッスンです
出張研修・コンサルティングお客様先で行う出張研修・コンサルティングです。お客様先で行う出張研修・コンサルティングです

 

table特定のセルに「text-nowrap」を指定すると行の折り返しが無くなる

2行目に「text-nowrap」を指定を指定しています。

コース名 コース詳細
折り返さない折り返さない折り返さない折り返さない
スタンダードコース48時間のスタンダードコースです。48時間のスタンダードコースです。
プロフェッショナルコース80時間のプロフェッショナルコースです。80時間のプロフェッショナルコースです
マンツーマンレッスン単発の完全マンツーマンレッスンです。単発の完全マンツーマンレッスンです
出張研修・コンサルティングお客様先で行う出張研修・コンサルティングです。お客様先で行う出張研修・コンサルティングです

 

ブレークポイントを設けたレスポンシブtable

「table-responsive-sm」「table-responsive-md」「table-responsive-lg」「table-responsive-xl」と
スクロールさせたい画面サイズのやつをつける。

「table-responsive-sm」575px以下でスクロール

「table-responsive-md」767px以下でスクロール

「table-responsive-lg」991px以下でスクロール

「table-responsive-xl」1199px以下でスクロール

コース名 コース詳細
ライトコース26時間のライトコースです。26時間のライトコースです。
スタンダードコース48時間のスタンダードコースです。48時間のスタンダードコースです。
プロフェッショナルコース80時間のプロフェッショナルコースです。80時間のプロフェッショナルコースです
マンツーマンレッスン単発の完全マンツーマンレッスンです。単発の完全マンツーマンレッスンです
出張研修・コンサルティングお客様先で行う出張研修・コンサルティングです。お客様先で行う出張研修・コンサルティングです

 

table背景色

「table」クラスに「table-dark」クラスをつけると背景色が黒くなる

ライトコース26時間のライトコースです
スタンダードコース48時間のスタンダードコースです
プロフェッショナルコース80時間のプロフェッショナルコースです
マンツーマンレッスン単発の完全マンツーマンレッスンです
出張研修・コンサルティングお客様先で行う出張研修・コンサルティングです

 

tableのヘッダー

「tr>th」を「thead.thead-dark」または「thead.thead-light」で囲む
これを付けているとスマホで要素が画面の外に出てしまうのでレスポンシブのクラスを付けています。

thead-dark

コース名 コース詳細
ライトコース26時間のライトコースです。26時間のライトコースです。
スタンダードコース48時間のスタンダードコースです。48時間のスタンダードコースです。
プロフェッショナルコース80時間のプロフェッショナルコースです。80時間のプロフェッショナルコースです
マンツーマンレッスン単発の完全マンツーマンレッスンです。単発の完全マンツーマンレッスンです
出張研修・コンサルティングお客様先で行う出張研修・コンサルティングです。お客様先で行う出張研修・コンサルティングです

 

thead-light

コース名 コース詳細
ライトコース26時間のライトコースです。26時間のライトコースです。
スタンダードコース48時間のスタンダードコースです。48時間のスタンダードコースです。
プロフェッショナルコース80時間のプロフェッショナルコースです。80時間のプロフェッショナルコースです
マンツーマンレッスン単発の完全マンツーマンレッスンです。単発の完全マンツーマンレッスンです
出張研修・コンサルティングお客様先で行う出張研修・コンサルティングです。お客様先で行う出張研修・コンサルティングです

 

bootstrap4で設定されている色を指定

「th」にクラスを指定しても効かない。
「th」の背景色を変える場合、「tr」にクラスを付ける。
「tr」にクラスを付ける場合、「td」にクラスを付けても効かない。

 

table-{color}を設定することで色を設定(td,thでも可能)

table-darkが効いていない。(contents.cssで指定した色が優先されるtable-light
thtable-dangerが効かない(trにつけたクラスが優先される)
thtable-active
thtable-primary
thtable-warning
thtable-success
thtable-danger
thtable-warning
thtable-info
thtable-light
thtable-dark

 

bg-{color}を設定することで鮮やかな色を設定(td,thでも可能)

「tr」の中に「th」が含まれる場合、「tr」にクラスを指定しても効かない。
「th」の背景色を変える場合、「th」自体にクラスを付ける。

bg-darkbg-light
tdbg-primary
thbg-secondary
thbg-success
thbg-danger
thbg-warning
thbg-info
thbg-light
thbg-dark