概要
<table>
カレンダーや日付ピッカーなどのサードパーティ ウィジェット全体で要素が広く使用されているため、Bootstrap のテーブルはオプトインされて います。基本クラス.table
を任意の に追加してから<table>
、オプションの修飾子クラスまたはカスタム スタイルで拡張します。Bootstrap ではすべてのテーブル スタイルが継承されるわけではありません。つまり、ネストされたテーブルは、親から独立してスタイルを設定できます。
最も基本的なテーブル マークアップを使用すると、.table
ベース テーブルが Bootstrap でどのように表示されるかを次に示します。
#
初め
最後
扱う
1
マーク
オットー
@mdo
2
ジェイコブ
ソーントン
@太い
3
鳥のラリー
@ツイッター
コピー
< table class = "table" >
< thead >
< tr >
< th scope = "col" > #</ th >
< th scope = "col" > First</ th >
< th scope = "col" > Last</ th >
< th scope = "col" > Handle</ th >
</ tr >
</ thead >
< tbody >
< tr >
< th scope = "row" > 1</ th >
< td > Mark</ td >
< td > Otto</ td >
< td > @mdo</ td >
</ tr >
< tr >
< th scope = "row" > 2</ th >
< td > Jacob</ td >
< td > Thornton</ td >
< td > @fat</ td >
</ tr >
< tr >
< th scope = "row" > 3</ th >
< td colspan = "2" > Larry the Bird</ td >
< td > @twitter</ td >
</ tr >
</ tbody >
</ table >
バリアント
表、表の行、または個々のセルに色を付けるには、コンテキスト クラスを使用します。
クラス
見出し
見出し
デフォルト
細胞
細胞
主要な
細胞
細胞
セカンダリ
細胞
細胞
成功
細胞
細胞
危険
細胞
細胞
警告
細胞
細胞
情報
細胞
細胞
光
細胞
細胞
暗い
細胞
細胞
コピー
<!-- On tables -->
< table class = "table-primary" > ...</ table >
< table class = "table-secondary" > ...</ table >
< table class = "table-success" > ...</ table >
< table class = "table-danger" > ...</ table >
< table class = "table-warning" > ...</ table >
< table class = "table-info" > ...</ table >
< table class = "table-light" > ...</ table >
< table class = "table-dark" > ...</ table >
<!-- On rows -->
< tr class = "table-primary" > ...</ tr >
< tr class = "table-secondary" > ...</ tr >
< tr class = "table-success" > ...</ tr >
< tr class = "table-danger" > ...</ tr >
< tr class = "table-warning" > ...</ tr >
< tr class = "table-info" > ...</ tr >
< tr class = "table-light" > ...</ tr >
< tr class = "table-dark" > ...</ tr >
<!-- On cells (`td` or `th`) -->
< tr >
< td class = "table-primary" > ...</ td >
< td class = "table-secondary" > ...</ td >
< td class = "table-success" > ...</ td >
< td class = "table-danger" > ...</ td >
< td class = "table-warning" > ...</ td >
< td class = "table-info" > ...</ td >
< td class = "table-light" > ...</ td >
< td class = "table-dark" > ...</ td >
</ tr >
支援技術に意味を伝える
色を使用して意味を追加しても、視覚的な指示しか提供されず、スクリーン リーダーなどの支援技術のユーザーには伝わりません。.visually-hidden
色で示される情報は、コンテンツ自体 (表示されるテキストなど) から明らかであるか、クラスで非表示の追加テキストなどの代替手段によって含まれていることを確認してください。
アクセントテーブル
縞模様の行
.table-striped
内の任意のテーブル行にゼブラ ストライプを追加するために使用します<tbody>
。
#
初め
最後
扱う
1
マーク
オットー
@mdo
2
ジェイコブ
ソーントン
@太い
3
鳥のラリー
@ツイッター
コピー
< table class = "table table-striped" >
...
</ table >
これらのクラスは、テーブル バリアントにも追加できます。
#
初め
最後
扱う
1
マーク
オットー
@mdo
2
ジェイコブ
ソーントン
@太い
3
鳥のラリー
@ツイッター
コピー
< table class = "table table-dark table-striped" >
...
</ table >
#
初め
最後
扱う
1
マーク
オットー
@mdo
2
ジェイコブ
ソーントン
@太い
3
鳥のラリー
@ツイッター
コピー
< table class = "table table-success table-striped" >
...
</ table >
ホバー可能な行
.table-hover
内の表の行でホバー状態を有効にするために追加します<tbody>
。
#
初め
最後
扱う
1
マーク
オットー
@mdo
2
ジェイコブ
ソーントン
@太い
3
鳥のラリー
@ツイッター
コピー
< table class = "table table-hover" >
...
</ table >
#
初め
最後
扱う
1
マーク
オットー
@mdo
2
ジェイコブ
ソーントン
@太い
3
鳥のラリー
@ツイッター
コピー
< table class = "table table-dark table-hover" >
...
</ table >
これらのホバー可能な行は、ストライプ バリアントと組み合わせることもできます。
#
初め
最後
扱う
1
マーク
オットー
@mdo
2
ジェイコブ
ソーントン
@太い
3
鳥のラリー
@ツイッター
コピー
< table class = "table table-striped table-hover" >
...
</ table >
アクティブなテーブル
.table-active
クラスを追加して、テーブルの行またはセルを強調表示します。
#
初め
最後
扱う
1
マーク
オットー
@mdo
2
ジェイコブ
ソーントン
@太い
3
鳥のラリー
@ツイッター
コピー
< table class = "table" >
< thead >
...
</ thead >
< tbody >
< tr class = "table-active" >
...
</ tr >
< tr >
...
</ tr >
< tr >
< th scope = "row" > 3</ th >
< td colspan = "2" class = "table-active" > Larry the Bird</ td >
< td > @twitter</ td >
</ tr >
</ tbody >
</ table >
#
初め
最後
扱う
1
マーク
オットー
@mdo
2
ジェイコブ
ソーントン
@太い
3
鳥のラリー
@ツイッター
コピー
< table class = "table table-dark" >
< thead >
...
</ thead >
< tbody >
< tr class = "table-active" >
...
</ tr >
< tr >
...
</ tr >
< tr >
< th scope = "row" > 3</ th >
< td colspan = "2" class = "table-active" > Larry the Bird</ td >
< td > @twitter</ td >
</ tr >
</ tbody >
</ table >
バリアントとアクセント付きテーブルはどのように機能しますか?
アクセント付きのテーブル (縞模様の行 、ホバー可能な行 、およびアクティブなテーブル ) では、これらの効果をすべてのテーブル バリアント で機能させるためにいくつかの手法を使用しました。
--bs-table-bg
カスタム プロパティを使用してテーブル セルの背景を設定することから始めます。次に、すべてのテーブル バリアントでそのカスタム プロパティを設定して、テーブル セルに色を付けます。このように、半透明の色がテーブルの背景として使用されていても、問題は発生しません。
次に、表のセルにインセット ボックスの影を追加し、box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
指定しbackground-color
た . 大きく広げてぼかしを入れていないので、色はモノトーンになります。はデフォルトで設定されていないため--bs-table-accent-bg
、デフォルトのボックス シャドウはありません。
またはクラスが追加されると.table-striped
、は半透明の色に設定され、背景に色が付けられます。.table-hover
.table-active
--bs-table-accent-bg
テーブル バリアントごと--bs-table-accent-bg
に、その色に応じてコントラストが最も高い色を生成します。たとえば、 のアクセント カラー.table-primary
は暗く、アクセント カラー.table-dark
は明るくなります。
テキストと境界線の色は同じ方法で生成され、それらの色はデフォルトで継承されます。
舞台裏では次のようになっています。
コピー
@mixin table-variant ( $state , $background ) {
.table- #{ $state } {
$color : color-contrast ( opaque ( $body-bg , $background ));
$hover-bg : mix ( $color , $background , percentage ( $table-hover-bg-factor ));
$striped-bg : mix ( $color , $background , percentage ( $table-striped-bg-factor ));
$active-bg : mix ( $color , $background , percentage ( $table-active-bg-factor ));
--#{$variable-prefix}table-bg : #{ $background } ;
--#{$variable-prefix}table-striped-bg : #{ $striped-bg } ;
--#{$variable-prefix}table-striped-color : #{ color-contrast ( $striped-bg ) } ;
--#{$variable-prefix}table-active-bg : #{ $active-bg } ;
--#{$variable-prefix}table-active-color : #{ color-contrast ( $active-bg ) } ;
--#{$variable-prefix}table-hover-bg : #{ $hover-bg } ;
--#{$variable-prefix}table-hover-color : #{ color-contrast ( $hover-bg ) } ;
color : $color ;
border-color : mix ( $color , $background , percentage ( $table-border-factor ));
}
}
表の罫線
縁取りテーブル
.table-bordered
テーブルとセルのすべての辺に罫線を追加します。
#
初め
最後
扱う
1
マーク
オットー
@mdo
2
ジェイコブ
ソーントン
@太い
3
鳥のラリー
@ツイッター
コピー
< table class = "table table-bordered" >
...
</ table >
境界色ユーティリティ を追加して、色を変更できます。
#
初め
最後
扱う
1
マーク
オットー
@mdo
2
ジェイコブ
ソーントン
@太い
3
鳥のラリー
@ツイッター
コピー
< table class = "table table-bordered border-primary" >
...
</ table >
ボーダーのないテーブル
.table-borderless
ボーダーなしのテーブルに追加します。
#
初め
最後
扱う
1
マーク
オットー
@mdo
2
ジェイコブ
ソーントン
@太い
3
鳥のラリー
@ツイッター
コピー
< table class = "table table-borderless" >
...
</ table >
#
初め
最後
扱う
1
マーク
オットー
@mdo
2
ジェイコブ
ソーントン
@太い
3
鳥のラリー
@ツイッター
コピー
< table class = "table table-dark table-borderless" >
...
</ table >
小さなテーブル
すべてのセルを半分にカットして、さらにコンパクト.table-sm
にするために追加します。.table
padding
#
初め
最後
扱う
1
マーク
オットー
@mdo
2
ジェイコブ
ソーントン
@太い
3
鳥のラリー
@ツイッター
コピー
< table class = "table table-sm" >
...
</ table >
#
初め
最後
扱う
1
マーク
オットー
@mdo
2
ジェイコブ
ソーントン
@太い
3
鳥のラリー
@ツイッター
コピー
< table class = "table table-dark table-sm" >
...
</ table >
垂直方向の配置
の表のセルは<thead>
、常に下に垂直に配置されます。のテーブル セルは<tbody>
配置を継承し<table>
、デフォルトで上に配置されます。垂直整列 クラスを使用して、必要に応じて再整列します。
見出し 1
見出し 2
見出し 3
見出し 4
このセルvertical-align: middle;
はテーブルから継承します
このセルvertical-align: middle;
はテーブルから継承します
このセルvertical-align: middle;
はテーブルから継承します
これは、前のセルで垂直方向の配置がどのように機能するかを示すために、かなりの垂直方向のスペースを占めることを目的としたプレースホルダー テキストです。
vertical-align: bottom;
このセルは表の行から継承されます
vertical-align: bottom;
このセルは表の行から継承されます
vertical-align: bottom;
このセルは表の行から継承されます
これは、前のセルで垂直方向の配置がどのように機能するかを示すために、かなりの垂直方向のスペースを占めることを目的としたプレースホルダー テキストです。
このセルvertical-align: middle;
はテーブルから継承します
このセルvertical-align: middle;
はテーブルから継承します
このセルは上に揃えられます。
これは、前のセルで垂直方向の配置がどのように機能するかを示すために、かなりの垂直方向のスペースを占めることを目的としたプレースホルダー テキストです。
コピー
< div class = "table-responsive" >
< table class = "table align-middle" >
< thead >
< tr >
...
</ tr >
</ thead >
< tbody >
< tr >
...
</ tr >
< tr class = "align-bottom" >
...
</ tr >
< tr >
< td > ...</ td >
< td > ...</ td >
< td class = "align-top" > This cell is aligned to the top.</ td >
< td > ...</ td >
</ tr >
</ tbody >
</ table >
</ div >
ネスティング
境界線のスタイル、アクティブなスタイル、およびテーブル バリアントは、ネストされたテーブルに継承されません。
#
初め
最後
扱う
1
マーク
オットー
@mdo
ヘッダ
ヘッダ
ヘッダ
あ
初め
最後
B
初め
最後
ハ
初め
最後
3
ラリー
鳥
@ツイッター
コピー
< table class = "table table-striped" >
< thead >
...
</ thead >
< tbody >
...
< tr >
< td colspan = "4" >
< table class = "table mb-0" >
...
</ table >
</ td >
</ tr >
...
</ tbody >
</ table >
ネスティングの仕組み
スタイルがネストされたテーブルに漏れるのを防ぐために >
、CSS で子コンビネーター ( ) セレクターを使用します。、、およびのすべてtd
の およびをターゲットにする必要があるため、セレクターはそれがないとかなり長く見えます。そのため、奇妙に見えるセレクターを使用して のすべての およびをターゲットにしますが、ネストされた可能性のあるテーブルは対象としません。th
thead
tbody
tfoot
.table > :not(caption) > * > *
td
th
.table
<tr>
s をテーブルの直接の子として追加すると、それらはデフォルト<tr>
で a にラップされるため、セレクターが意図したとおりに機能することに注意してください。<tbody>
解剖学
テーブルヘッド
テーブルやダーク テーブルと同様に、修飾子クラス.table-light
または.table-dark
を使用して、 を<thead>
ライト グレーまたはダーク グレーに表示します。
#
初め
最後
扱う
1
マーク
オットー
@mdo
2
ジェイコブ
ソーントン
@太い
3
ラリー
鳥
@ツイッター
コピー
< table class = "table" >
< thead class = "table-light" >
...
</ thead >
< tbody >
...
</ tbody >
</ table >
#
初め
最後
扱う
1
マーク
オットー
@mdo
2
ジェイコブ
ソーントン
@太い
3
ラリー
鳥
@ツイッター
コピー
< table class = "table" >
< thead class = "table-dark" >
...
</ thead >
< tbody >
...
</ tbody >
</ table >
#
初め
最後
扱う
1
マーク
オットー
@mdo
2
ジェイコブ
ソーントン
@太い
3
ラリー
鳥
@ツイッター
フッター
フッター
フッター
フッター
コピー
< table class = "table" >
< thead >
...
</ thead >
< tbody >
...
</ tbody >
< tfoot >
...
</ tfoot >
</ table >
キャプション
表の<caption>
見出しのように機能します。スクリーン リーダーを使用しているユーザーが表を見つけて内容を理解し、読みたいかどうかを判断するのに役立ちます。
ユーザー一覧
#
初め
最後
扱う
1
マーク
オットー
@mdo
2
ジェイコブ
ソーントン
@太い
3
鳥のラリー
@ツイッター
コピー
< table class = "table table-sm" >
< caption > List of users</ caption >
< thead >
...
</ thead >
< tbody >
...
</ tbody >
</ table >
<caption>
をテーブルの上に置くこともできます.caption-top
。
ユーザー一覧
#
初め
最後
扱う
1
マーク
オットー
@mdo
2
ジェイコブ
ソーントン
@太い
3
ラリー
鳥
@ツイッター
コピー
< table class = "table caption-top" >
< caption > List of users</ caption >
< thead >
< tr >
< th scope = "col" > #</ th >
< th scope = "col" > First</ th >
< th scope = "col" > Last</ th >
< th scope = "col" > Handle</ th >
</ tr >
</ thead >
< tbody >
< tr >
< th scope = "row" > 1</ th >
< td > Mark</ td >
< td > Otto</ td >
< td > @mdo</ td >
</ tr >
< tr >
< th scope = "row" > 2</ th >
< td > Jacob</ td >
< td > Thornton</ td >
< td > @fat</ td >
</ tr >
< tr >
< th scope = "row" > 3</ th >
< td > Larry</ td >
< td > the Bird</ td >
< td > @twitter</ td >
</ tr >
</ tbody >
</ table >
レスポンシブ テーブル
レスポンシブ テーブルを使用すると、テーブルを水平方向に簡単にスクロールできます。を でラップして、すべてのビューポートでテーブルをレスポンシブに.table
し.table-responsive
ます。または、 を使用して、レスポンシブ テーブルを最大にする最大ブレークポイントを選択します.table-responsive{-sm|-md|-lg|-xl|-xxl}
。
垂直クリッピング/切り捨て
レスポンシブ テーブルはoverflow-y: hidden
、テーブルの下端または上端を超えるコンテンツを切り取る を使用します。特に、これにより、ドロップダウン メニューやその他のサードパーティ製ウィジェットが切り取られる可能性があります。
常に反応する
すべてのブレークポイントで、.table-responsive
水平方向にスクロールするテーブルに使用します。
#
見出し
見出し
見出し
見出し
見出し
見出し
見出し
見出し
見出し
1
細胞
細胞
細胞
細胞
細胞
細胞
細胞
細胞
細胞
2
細胞
細胞
細胞
細胞
細胞
細胞
細胞
細胞
細胞
3
細胞
細胞
細胞
細胞
細胞
細胞
細胞
細胞
細胞
コピー
< div class = "table-responsive" >
< table class = "table" >
...
</ table >
</ div >
ブレークポイント固有
必要に応じて使用.table-responsive{-sm|-md|-lg|-xl|-xxl}
して、特定のブレークポイントまでレスポンシブ テーブルを作成します。そのブレークポイント以降、テーブルは通常どおりに動作し、水平方向にスクロールしません。
これらのテーブルは、特定のビューポート幅でレスポンシブ スタイルが適用されるまで、壊れたように見える場合があります。
#
見出し
見出し
見出し
見出し
見出し
見出し
見出し
見出し
1
細胞
細胞
細胞
細胞
細胞
細胞
細胞
細胞
2
細胞
細胞
細胞
細胞
細胞
細胞
細胞
細胞
3
細胞
細胞
細胞
細胞
細胞
細胞
細胞
細胞
#
見出し
見出し
見出し
見出し
見出し
見出し
見出し
見出し
1
細胞
細胞
細胞
細胞
細胞
細胞
細胞
細胞
2
細胞
細胞
細胞
細胞
細胞
細胞
細胞
細胞
3
細胞
細胞
細胞
細胞
細胞
細胞
細胞
細胞
#
見出し
見出し
見出し
見出し
見出し
見出し
見出し
見出し
1
細胞
細胞
細胞
細胞
細胞
細胞
細胞
細胞
2
細胞
細胞
細胞
細胞
細胞
細胞
細胞
細胞
3
細胞
細胞
細胞
細胞
細胞
細胞
細胞
細胞
#
見出し
見出し
見出し
見出し
見出し
見出し
見出し
見出し
1
細胞
細胞
細胞
細胞
細胞
細胞
細胞
細胞
2
細胞
細胞
細胞
細胞
細胞
細胞
細胞
細胞
3
細胞
細胞
細胞
細胞
細胞
細胞
細胞
細胞
#
見出し
見出し
見出し
見出し
見出し
見出し
見出し
見出し
1
細胞
細胞
細胞
細胞
細胞
細胞
細胞
細胞
2
細胞
細胞
細胞
細胞
細胞
細胞
細胞
細胞
3
細胞
細胞
細胞
細胞
細胞
細胞
細胞
細胞
#
見出し
見出し
見出し
見出し
見出し
見出し
見出し
見出し
1
細胞
細胞
細胞
細胞
細胞
細胞
細胞
細胞
2
細胞
細胞
細胞
細胞
細胞
細胞
細胞
細胞
3
細胞
細胞
細胞
細胞
細胞
細胞
細胞
細胞
コピー
< div class = "table-responsive" >
< table class = "table" >
...
</ table >
</ div >
< div class = "table-responsive-sm" >
< table class = "table" >
...
</ table >
</ div >
< div class = "table-responsive-md" >
< table class = "table" >
...
</ table >
</ div >
< div class = "table-responsive-lg" >
< table class = "table" >
...
</ table >
</ div >
< div class = "table-responsive-xl" >
< table class = "table" >
...
</ table >
</ div >
< div class = "table-responsive-xxl" >
< table class = "table" >
...
</ table >
</ div >
サス
変数
コピー
$table-cell-padding-y : .5 rem ;
$table-cell-padding-x : .5 rem ;
$table-cell-padding-y-sm : .25 rem ;
$table-cell-padding-x-sm : .25 rem ;
$table-cell-vertical-align : top ;
$table-color : $body-color ;
$table-bg : transparent ;
$table-accent-bg : transparent ;
$table-th-font-weight : null ;
$table-striped-color : $table-color ;
$table-striped-bg-factor : .05 ;
$table-striped-bg : rgba ( $black , $table-striped-bg-factor );
$table-active-color : $table-color ;
$table-active-bg-factor : .1 ;
$table-active-bg : rgba ( $black , $table-active-bg-factor );
$table-hover-color : $table-color ;
$table-hover-bg-factor : .075 ;
$table-hover-bg : rgba ( $black , $table-hover-bg-factor );
$table-border-factor : .1 ;
$table-border-width : $border-width ;
$table-border-color : $border-color ;
$table-striped-order : odd ;
$table-group-separator-color : currentColor ;
$table-caption-color : $text-muted ;
$table-bg-scale : - 80 % ;
ループ
コピー
$table-variants : (
"primary" : shift-color ( $primary , $table-bg-scale ) ,
"secondary" : shift-color ( $secondary , $table-bg-scale ) ,
"success" : shift-color ( $success , $table-bg-scale ) ,
"info" : shift-color ( $info , $table-bg-scale ) ,
"warning" : shift-color ( $warning , $table-bg-scale ) ,
"danger" : shift-color ( $danger , $table-bg-scale ) ,
"light" : $light ,
"dark" : $dark ,
);
カスタマイズ
因子変数 ( $table-striped-bg-factor
、$table-active-bg-factor
& $table-hover-bg-factor
) は、テーブル バリアントの対比を決定するために使用されます。
明るい色と暗い色のテーブル バリアントとは別に、テーマの色は$table-bg-level
変数によって明るくなります。