表

基本構成

• table.table
  • 白黒反転は .table-dark を追加
  • ヘッダ部 thead
    • ヘッダ行 tr
      • ヘッダセル th 属性
        • 属性 scope="col" (行のヘッダセルに設定、なくてもよいがある方が丁寧)
  • ボディ部 tbody
    • 行 tr
      • ヘッダセルの場合(通常左端) th 属性
        • 属性 scope="row" (列のヘッダセルに設定、なくてもよいがある方が丁寧)
      • 通常セルの場合 td

table.table

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

table.table.table-dark

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

ヘッダ部の設定

thead に .thead-(dark|light) を設定 ( .table-(dark|light) でもよい)

.thead-dark

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

.thead-light

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

一行おきストライプ表示

table に .table-striped を設定

table.table.table-striped

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

table.table.table-striped.table-dark

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

罫線

table に .table-bordered を設定

table.table.table-bordered

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

table.table.table-bordered.table-dark

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

罫線なし

table に .table-borderless を設定

table.table.table-borderless

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

table.table.table-borderless.table-dark

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

行のホバー表示

table に .table-hover を設定

table.table.table-hover

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

table.table.table-hover.table-dark

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

縮小表示

table に .table-sm を設定すると上下幅を詰める

table.table.table-sm

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

table.table.table-sm.table-dark

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

コンテキスト配色設定

.table-(primary|secondary|success|danger|warning|info|light|dark|active)

表要素の各レベル ( table , thead , tbody , tr , th , td ) 全てに適用可

通常のコンテキスト配色設定との違いは次の通り

• -muted と -white なし (.table-muted や .table-muted は存在しない)
• 表専用に -active がある (.table-active )

tr への設定例

Class	Heading	Heading
(default)	Cell	Cell
.table-primary	Cell	Cell
.table-secondary	Cell	Cell
.table-success	Cell	Cell
.table-danger	Cell	Cell
.table-warning	Cell	Cell
.table-info	Cell	Cell
.table-light	Cell	Cell
.table-dark	Cell	Cell
.table-active	Cell	Cell

.table-{context} は文字と背景の両方に作用することに注意(上の例で .table-dark だけセルの文字色が反転していることに注目)。また通常の背景設定 .bg-{context}より色が薄くなる。背景色を直接設定してもよいが、その場合は文字色も適宜手動設定する必要がある・

背景色を .bg-{context} , 文字色を .text-(dark|white) で直接設定した例

Class	Heading	Heading
.bg-primary.text-white	Cell	Cell
.bg-secondary.text-white	Cell	Cell
.bg-success.text-white	Cell	Cell
.bg-danger.text-white	Cell	Cell
.bg-warning.text-white	Cell	Cell
.bg-info.text-white	Cell	Cell
.bg-light.text-dark	Cell	Cell
.bg-dark.text-white	Cell	Cell
.bg-white.text-dark	Cell	Cell

見出し

caption 要素を用いる

• table.table
  • caption
    • 配置は .text-(left|center|right) で設定可(⇒ アラインメント )
  • thead 以下は同じ

設定例: 中央下の List of users が見出し、caption.text-center で中央に配置

List of users

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

レスポンシブ設定

table.table に .table-responsive を追加 ⇒ table.table.table-responsive

⇒ 画面幅が表の幅未満の場合に横スクロールバーを表示

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

幅別のレスポンシブ対応には .table-responsive-(sm|md|lg|xl) を用いる

table.table.table-responsive-sm

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

table.table.table-responsive-md

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

table.table.table-responsive-lg

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

table.table.table-responsive-xl

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell