標準のテーブル(Overview)v5.0.0-alpha1スタイル変更
カレンダーや日付選択ツールなどのサードパーティ製ウィジェットで <table>
要素が広く使用されているため、Bootstrapのテーブル(表)はオプトイン(同意式)で設計。基本クラスの .table
を任意の <table>
に追加して、オプションの修飾子クラスやカスタムスタイルで拡張させる。すべてのテーブルスタイルがBootstrapで継承されるわけではなく、入れ子になったテーブルは、親から独立したスタイルが設定可能。
※マークアップのないベースのテーブルのスタイルはRebootに掲載。
最も基本的なテーブルのマークアップを使用して、Bootstrapで .table
ベースのテーブルがどのように見えるかを次に表示。
見本 ※v4のテーブルのデザインはこちらに記載
# | 見出し | 見出し | 見出し |
---|---|---|---|
1 | テーブルのセル | テーブルのセル | テーブルのセル |
2 | テーブルのセル | テーブルのセル | テーブルのセル |
3 | テーブルのセル | テーブルのセル | テーブルのセル |
設定例
<table class="table">
<thead>
<tr>
<th>#</th>
<th scope="col">見出し</th>
...
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>テーブルのセル</td>
...
</tr>
...
</tbody>
</table>
【設定】
table.table
> [<thead>
><tr>
><th>
]《見出し》 + [<tbody>
><tr>
><th>
+<td>
]《コンテンツ》
※<table>
タグの中に.table
を入れる
【アクセシビリティの設定】
- 行(行末)方向に対する見出しの
<th>
タグにはscope="row"
を入れる - 列(下)方向に対する見出しの
<th>
タグにはscope="col"
を入れる
【変更履歴】
- 【v5.0.0-alpha1】よりシンプルなスタイルに変更
- セルの
border-top
の設定がなくなる thead
とtbody
の境界線の太さで2pxの設定がなくなる- セルの
padding
が0.75rem⇒0.5remに変更
- セルの
カラーバリエーション(Variants)
1. コンテキストクラスで設定 v5.0.0-alpha1一部スタイル変更
コンテキストクラスを使用して、テーブル、テーブルの行、個々のセルに色を付ける。
カラーバリエーションの種類
タイプ | クラス名 | 見出し | 見出し |
---|---|---|---|
Active | .table-active |
テーブルのセル | テーブルのセル |
Primary | .table-primary |
テーブルのセル | テーブルのセル |
Secondary | .table-secondary |
テーブルのセル | テーブルのセル |
Success | .table-success |
テーブルのセル | テーブルのセル |
Info | .table-info |
テーブルのセル | テーブルのセル |
Warning | .table-warning |
テーブルのセル | テーブルのセル |
Danger | .table-danger |
テーブルのセル | テーブルのセル |
Light | .table-light |
テーブルのセル | テーブルのセル |
Dark | .table-dark |
テーブルのセル | テーブルのセル |
※標準(参考) | 設定なし | テーブルのセル | テーブルのセル |
設定例
テーブル全体の場合<table class="table table-active">
<tr>
<td>...</td>
</tr>
</table>
行の場合<tr class="table-active">
<td>...</td>
</tr>
セルの場合<tr>
<td class="table-active">...</td>
</tr>
【設定】
- テーブル全体(
table.table
)、行全体(<tr>
)、セル(<th>
,<td>
)に.table-{themecolor}
(上記の「背景色の種類」から選択)を入れる {themecolor}
は、active
,primary
,secondary
,success
,info
,warning
,danger
,light
,dark
のいずれかを選択
【変更履歴】
- 【v5.0.0-alpha1】
<tr>
に.table-dark
を追加した場合と、<th>
,<td>
に.table-dark
を追加した場合では背景色、枠線色が異なる現象が解消.table-{themecolor}
独自のborder-color
の設定がなくなる(ブラウザのダークモードを除く)
2. 背景色ユーティリティクラスで設定
文字色や背景色ユーティリティクラスを使用して同様のスタイルを実現。
背景色の種類
タイプ | クラス名 | 見出し | 見出し |
---|---|---|---|
Primary | .bg-primary |
テーブルのセル | テーブルのセル |
Secondary | .bg-secondary |
テーブルのセル | テーブルのセル |
Success | .bg-success |
テーブルのセル | テーブルのセル |
Info | .bg-info |
テーブルのセル | テーブルのセル |
Warning | .bg-warning |
テーブルのセル | テーブルのセル |
Danger | .bg-danger |
テーブルのセル | テーブルのセル |
Light | .bg-light |
テーブルのセル | テーブルのセル |
Dark | .bg-dark.text-white |
テーブルのセル | テーブルのセル |
White | .bg-white |
テーブルのセル | テーブルのセル |
※標準(参考) | 設定なし | テーブルのセル | テーブルのセル |
設定例
テーブル全体の場合<table class="table bg-primary">
<tr>
<td>...</td>
</tr>
</table>
行の場合<table class="table">
<tr class="bg-primary">
<td>...</td>
</tr>
</table>
セルの場合<table class="table">
<tr>
<td class="bg-primary">...</td>
</tr>
</table>
【設定】
- テーブル全体(
table.table
)、行全体(<tr>
)、セル(<th>
,<td>
)に.bg-{themecolor}
(背景色ユーティリティクラスから選択)を入れる
【注意】
- 文字色は自動で設定されないので、適宜文字色のユーティリティを使用すること
支援技術への意味の伝達
意味を追加するのにカラー名を使用しても視覚的な指示を提供するだけであり、スクリーンリーダーなどの支援技術のユーザーには伝わらないだろう。カラー名で表示された情報をコンテンツ自体で明らかにするか(可視テキストなど)、代替手段として追加のテキストなどを .visually-hidden
クラスで隠すなどして入れるようにすること。
アクセント付きテーブル(Accented tables)
行が縞ストライブのテーブル(Striped rows)
.table-striped
を使用して、<tbody>
内のテーブル行に縞ストライブを追加。
1. 標準のテーブルに設定
見本
# | 見出し | 見出し | 見出し |
---|---|---|---|
1 | テーブルのセル | テーブルのセル | テーブルのセル |
2 | テーブルのセル | テーブルのセル | テーブルのセル |
3 | テーブルのセル | テーブルのセル | テーブルのセル |
設定例
<table class="table table-striped">
...
</table>
これらのクラスは、カラーバリエーション・テーブルに追加することも可能。
2. Darkのテーブルに設定
見本
# | 見出し | 見出し | 見出し |
---|---|---|---|
1 | テーブルのセル | テーブルのセル | テーブルのセル |
2 | テーブルのセル | テーブルのセル | テーブルのセル |
3 | テーブルのセル | テーブルのセル | テーブルのセル |
設定例
<table class="table table-dark table-striped">
...
</table>
3. Successのテーブルに設定
見本
# | 見出し | 見出し | 見出し |
---|---|---|---|
1 | テーブルのセル | テーブルのセル | テーブルのセル |
2 | テーブルのセル | テーブルのセル | テーブルのセル |
3 | テーブルのセル | テーブルのセル | テーブルのセル |
設定例
<table class="table table-success table-striped">
...
</table>
4. 背景色ユーティリティを使用したテーブルに設定
見本
# | 見出し | 見出し | 見出し |
---|---|---|---|
1 | テーブルのセル | テーブルのセル | テーブルのセル |
2 | テーブルのセル | テーブルのセル | テーブルのセル |
3 | テーブルのセル | テーブルのセル | テーブルのセル |
【設定】
table.table
に.table-striped
を追加すると、<tbody>
内の行の背景色が交互に変わるようになる
行がホバー表示するテーブル(Hoverable rows)
.table-hover
を追加すると、<tbody>
内のテーブル行でホバー状態が有効になる。
見本
# | 見出し | 見出し | 見出し |
---|---|---|---|
1 | テーブルのセル | テーブルのセル | テーブルのセル |
2 | テーブルのセル | テーブルのセル | テーブルのセル |
3 | テーブルのセル | テーブルのセル | テーブルのセル |
●Darkのテーブルで設定
# | 見出し | 見出し | 見出し |
---|---|---|---|
1 | テーブルのセル | テーブルのセル | テーブルのセル |
2 | テーブルのセル | テーブルのセル | テーブルのセル |
3 | テーブルのセル | テーブルのセル | テーブルのセル |
設定例
<table class="table table-hover">
...
</table>
ホバー表示可能な行は、縞ストライブのテーブルと組み合わせ可能。
見本
# | 見出し | 見出し | 見出し |
---|---|---|---|
1 | テーブルのセル | テーブルのセル | テーブルのセル |
2 | テーブルのセル | テーブルのセル | テーブルのセル |
3 | テーブルのセル | テーブルのセル | テーブルのセル |
設定例
<table class="table table-striped table-hover">
...
</table>
【設定】
table.table
に.table-hover
を追加すると、<tbody>
内の行にカーソルを合わせるとその行の背景色が変わるようになる
強調表示するテーブル(Active tables)v5.0.0-alpha1新設
.table-active
クラスを追加して、テーブルの行やセルを強調表示。
見本
# | 見出し | 見出し | 見出し |
---|---|---|---|
1 | テーブルのセル | テーブルのセル | テーブルのセル |
2 | テーブルのセル | テーブルのセル | テーブルのセル |
3 | テーブルの結合セル | テーブルのセル |
●Darkのテーブルで設定
# | 見出し | 見出し | 見出し |
---|---|---|---|
1 | テーブルのセル | テーブルのセル | テーブルのセル |
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">テーブルの結合セル</td>
<td>テーブルのセル</td>
</tr>
</tbody>
</table>
【設定】
- 強調したいセルに
.table-active
を追加(カラーバリエーションテーブルでも設定可)
カラーバリエーションやアクセント付きテーブルのしくみ(How do the variants and accented tables work?)v5.0.0-alpha1新設
アクセント付きテーブル(縞ストライブの行、ホバー表示可能な行、強調表示のテーブル)については、いくつかの手法を使用して、すべてのカラーバリエーション・テーブルでこれらの効果を機能させた。
- 始めに
--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
は明るめのアクセントカラーになる。 - テキストと罫線の色は同じ方法で生成され、それらの色はデフォルトで継承される。
裏では以下のようになる:
デフォルトの設定
scss/mixins/_table-variants.scss@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));
--bs-table-bg: #{$background};
--bs-table-striped-bg: #{$striped-bg};
--bs-table-striped-color: #{color-contrast($striped-bg)};
--bs-table-active-bg: #{$active-bg};
--bs-table-active-color: #{color-contrast($active-bg)};
--bs-table-hover-bg: #{$hover-bg};
--bs-table-hover-color: #{color-contrast($hover-bg)};
color: $color;
border-color: mix($color, $background, percentage($table-border-factor));
}
}
【注意】
- Internet Explorerのサポートを廃止したのでCSSカスタムプロパティによる設定方法が可能になった
テーブルの罫線(Table borders)
縦罫線が入ったテーブル(Bordered tables)
1. 標準のテーブルの設定
テーブルとセルのすべての辺に罫線用の .table-bordered
を追加。
見本
# | 見出し | 見出し | 見出し |
---|---|---|---|
1 | テーブルのセル | テーブルのセル | テーブルのセル |
2 | テーブルのセル | テーブルのセル | テーブルのセル |
3 | テーブルの結合セル | テーブルのセル |
●Darkのテーブルで設定
# | 見出し | 見出し | 見出し |
---|---|---|---|
1 | テーブルのセル | テーブルのセル | テーブルのセル |
2 | テーブルのセル | テーブルのセル | テーブルのセル |
3 | テーブルの結合セル | テーブルのセル |
設定例
<table class="table table-bordered">
...
</table>
2. 罫線の色ユーティリティクラスを使用 v5.0.0-alpha1新設
罫線の色ユーティリティを追加して、罫線の色の変更が可能。
見本
# | 見出し | 見出し | 見出し |
---|---|---|---|
1 | テーブルのセル | テーブルのセル | テーブルのセル |
2 | テーブルのセル | テーブルのセル | テーブルのセル |
3 | テーブルの結合セル | テーブルのセル |
設定例
<table class="table table-bordered border-primary">
...
</table>
【設定】
table.table
に.table-bordered
を追加table.table.table-bordered
に.border-{themecolor}
(罫線の色ユーティリティクラス)を追加すれば罫線の色が変更可能に
罫線のないテーブル(Tables without borders)
.table-borderless
を追加すると、罫線のないテーブルになる。
見本
# | 見出し | 見出し | 見出し |
---|---|---|---|
1 | テーブルのセル | テーブルのセル | テーブルのセル |
2 | テーブルのセル | テーブルのセル | テーブルのセル |
3 | テーブルの結合セル | テーブルのセル |
●Darkのテーブルで設定
# | 見出し | 見出し | 見出し |
---|---|---|---|
1 | テーブルのセル | テーブルのセル | テーブルのセル |
2 | テーブルのセル | テーブルのセル | テーブルのセル |
3 | テーブルの結合セル | テーブルのセル |
設定例
<table class="table table-borderless">
...
</table>
【設定】
table.table
に.table-borderless
を追加
セル間が狭いテーブル(Small table)
.table-sm
を追加して、すべてのセルの padding
を半分にすることで .table
をよりコンパクトにする。
見本
# | 見出し | 見出し | 見出し |
---|---|---|---|
1 | テーブルのセル | テーブルのセル | テーブルのセル |
2 | テーブルのセル | テーブルのセル | テーブルのセル |
3 | テーブルのセル | テーブルのセル | テーブルのセル |
●Darkのテーブルで設定
# | 見出し | 見出し | 見出し |
---|---|---|---|
1 | テーブルのセル | テーブルのセル | テーブルのセル |
2 | テーブルのセル | テーブルのセル | テーブルのセル |
3 | テーブルのセル | テーブルのセル | テーブルのセル |
設定例
<table class="table table-sm">
...
</table>
【設定】
table.table
に.table-sm
を追加(セルのpadding
が0.25remに)
垂直方向の配置(Vertical alignment)v5.0.0-alpha1新設
<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">このセルは上に揃えられる</td>
<td>...</td>
</tr>
</tbody>
</table>
</div>
【設定】
<table>
,<tr>
,<th>
,<td>
にそれぞれ.align-**
(縦の配置ユーティリティクラス)を入れると垂直方向の配置設定が可能
入れ子(Nesting)v5.0.0-alpha1新設
罫線、強調表示、カラーバリエーションのスタイルは、入れ子になったテーブルには継承されない。
見本
# | 見出し | 見出し | 見出し | |||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
1 | テーブルのセル | テーブルのセル | テーブルのセル | |||||||||
|
||||||||||||
2 | テーブルのセル | テーブルのセル | テーブルのセル |
設定例
<table class="table table-striped table-bordered">
<thead>
...
</thead>
<tbody>
...
<tr>
<td colspan="4">
<table class="table mb-0">
...
</table>
</td>
</tr>
...
</tbody>
</table>
【変更履歴】
- 【v5.0.0-alpha1】
- テーブルを入れ子にしても子テーブルは親テーブルのスタイルを継承しなくなった(子テーブルは独自のスタイル設定ができるようになった)
入れ子のしくみ(How nesting works)v5.0.0-alpha1新設
入れ子になったテーブルに任意のスタイルが漏れるのを防ぐために、CSSで子コンビネータ(>
)セレクタを使用。thead
, tbody
, tfoot
のすべての td
と th
をターゲットにする必要があるため、セレクタがないとかなり長く見えてしまう。そのため、奇妙に見えるが .table > :not(caption) > * > *
セレクタを使用して、.table
のすべての td
と th
をターゲットにするが、入れ子になった潜在的なテーブルはターゲットにしない。
<tr>
をテーブルの直接の子として追加すると、それらの <tr>
はデフォルトで <tbody>
で囲むことになるので、セレクタが意図したとおりに機能するので注意(子テーブルにも <thead>
, <tbody>
の設定をする)。
構造(Anatomy)
ヘッダの見出し(Table head)v5.0.0-alpha1設定変更
カラーバリエーション・テーブルと同様に、修飾子クラス .table-light
や .table-dark
を使って、<thead>
に色を付ける。
見本
●暗めの見出し
# | 見出し | 見出し | 見出し |
---|---|---|---|
1 | テーブルのセル | テーブルのセル | テーブルのセル |
2 | テーブルのセル | テーブルのセル | テーブルのセル |
3 | テーブルのセル | テーブルのセル | テーブルのセル |
●明るめの見出し
# | 見出し | 見出し | 見出し |
---|---|---|---|
1 | テーブルのセル | テーブルのセル | テーブルのセル |
2 | テーブルのセル | テーブルのセル | テーブルのセル |
3 | テーブルのセル | テーブルのセル | テーブルのセル |
Bootstrap5.xの設定例 緑背景が変更箇所
暗めの見出し<table class="table">
<thead class="table-dark">
...
</table>
明るめの見出し<table class="table">
<thead class="table-light">
...
</table>
※Bootstrap4.xの設定例 赤背景が変更箇所
暗めの見出し<table class="table">
<thead class="thead-dark">
...
</table>
明るめの見出し<table class="table">
<thead class="thead-light">
...
</table>
【設定】
<thead>
タグに.table-{themecolor}
を入れる(dark
,light
以外も可)
【変更履歴】
- 【v5.0.0-alpha1】
thead.thead-{dark|light}
⇒thead.table-{themecolor}
(.thead-{dark|light}
は廃止)
フッタの見出し(Table foot)
見本
# | 見出し | 見出し | 見出し |
---|---|---|---|
1 | テーブルのセル | テーブルのセル | テーブルのセル |
2 | テーブルのセル | テーブルのセル | テーブルのセル |
3 | テーブルのセル | テーブルのセル | テーブルのセル |
# | 見出し | 見出し | 見出し |
設定例
<table class="table">
<thead>
...
</thead>
<tbody>
...
</tbody>
<tfoot>
...
</tfoot>
</table>
【設定】
<tbody>
の後に<tfoot>
をつけることも可能(Bootstrap特有の設定はない)
キャプション(Captions)v5.0.0-alpha1クラス追加
<caption>
はテーブルの表題のように機能。スクリーンリーダーを持つユーザーがテーブルを見つけて、それが何であるかを理解し、それを読むかどうかを決定するのに役立つ。
1. 標準の設定(テーブルの下部にキャプションを配置)
見本
# | 見出し | 見出し | 見出し |
---|---|---|---|
1 | テーブルのセル | テーブルのセル | テーブルのセル |
2 | テーブルのセル | テーブルのセル | テーブルのセル |
3 | テーブルのセル | テーブルのセル | テーブルのセル |
設定例
<table class="table">
<caption>テーブルのキャプション</caption>
...
</table>
2. テーブルの上部にキャプションを配置 v5.0.0-alpha1追加
.caption-top
を使用すれば、テーブルの上部に <caption>
が配置可能。
見本
# | 見出し | 見出し | 見出し |
---|---|---|---|
1 | テーブルのセル | テーブルのセル | テーブルのセル |
2 | テーブルのセル | テーブルのセル | テーブルのセル |
3 | テーブルのセル | テーブルのセル | テーブルのセル |
設定例
<table class="table caption-top">
<caption>テーブルのキャプション</caption>
...
</table>
【設定】
table.table
><caption>
(キャプションはテーブルの下に表示される)- キャプションをテーブルの上部に配置するには
table.table
に.caption-top
を追加(<caption>
には追加しないこと)
レスポンシブテーブル(Responsive tables)
レスポンステーブルを使用すると、テーブルを簡単に水平方向にスクロール可能。.table
を .table-responsive
で囲むことによって、すべてのビューポートでレスポンシブ可能なテーブルを作成。または、最大幅のブレークポイントを持つレスポンシブテーブルを作成する場合は .table-responsive{-sm|-md|-lg|-xl|-xxl}
から選択。
垂直クリップ/切り捨て
レスポンシブテーブルは、overflow-y: hidden
を使用し、テーブルの下端や上端を超えるコンテンツをクリップする(切り取る)。これで特にドロップメニューや他のサードパーティ製のウィジェットを切り捨てることが可能。
常にレスポンシブ(Always responsive)
すべてのブレークポイントにわたって、テーブルを水平にスクロールするために .table-responsive
を使用。
見本
# | 見出し | 見出し | 見出し | 見出し | 見出し | 見出し | 見出し | 見出し | 見出し |
---|---|---|---|---|---|---|---|---|---|
1 | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル |
2 | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル |
3 | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル |
●セル内で文章を折り返さないようにする(裏技)
# | 見出し | 見出し | 見出し | 見出し | 見出し | 見出し | 見出し | 見出し | 見出し |
---|---|---|---|---|---|---|---|---|---|
1 | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル |
2 | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル |
3 | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル |
設定例
<div class="table-responsive">
<table class="table">
...
</table>
</div>
セル内で文章を折り返さない<div class="table-responsive">
<table class="table text-nowrap">
...
</table>
</div>
【設定】
div.table-responsive
>table.table
- テーブルがコンテナよりも広いときは、必要に応じてセルを折り返すので、
table.table
に.text-nowrap
を追加すると、セルを折り返さずに表示される
特定のブレークポイント(Breakpoint specific)v5.0.0-alpha1クラス追加
必要に応じて .table-responsive{-sm|-md|-lg|-xl|-xxl}
を使用して、特定のブレークポイントまでのレスポンシブテーブルを作成。そのブレークポイント以降では、テーブルは正常に動作し、水平方向にスクロールしない。
これらのテーブルは、レスポンススタイルが特定のビューポートの幅に適用されるまで、破損しているように見える場合がある。
見本 ※画面からはみ出す部分は非表示にしています
●ビューポートが575px以下で、テーブルの幅がコンテナよりも広いときは水平スクロールが表示 .table-responsive-sm
# | 見出し | 見出し | 見出し | 見出し | 見出し | 見出し |
---|---|---|---|---|---|---|
1 | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル |
2 | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル |
3 | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル |
●ビューポートが767px以下で、テーブルの幅がコンテナよりも広いときは水平スクロールが表示 .table-responsive-md
# | 見出し | 見出し | 見出し | 見出し | 見出し | 見出し |
---|---|---|---|---|---|---|
1 | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル |
2 | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル |
3 | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル |
●ビューポートが991px以下で、テーブルの幅がコンテナよりも広いときは水平スクロールが表示 .table-responsive-lg
# | 見出し | 見出し | 見出し | 見出し | 見出し | 見出し |
---|---|---|---|---|---|---|
1 | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル |
2 | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル |
3 | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル |
●ビューポートが1199px以下で、テーブルの幅がコンテナよりも広いときは水平スクロールが表示 .table-responsive-xl
# | 見出し | 見出し | 見出し | 見出し | 見出し | 見出し |
---|---|---|---|---|---|---|
1 | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル |
2 | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル |
3 | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル |
●ビューポートが1399px以下で、テーブルの幅がコンテナよりも広いときは水平スクロールが表示 .table-responsive-xxl
v5.0.0-alpha1追加
# | 見出し | 見出し | 見出し | 見出し | 見出し | 見出し |
---|---|---|---|---|---|---|
1 | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル |
2 | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル |
3 | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル | テーブルのセル |
設定例
<div class="table-responsive-sm">
<table class="table">
...
</table>
</div>
【設定】
- ビューポートに応じて、水平スクロール表示にする場合は、
table.table
をdiv.table-responsive-{breakpoint}
で囲む{breakpoint}
(sm
(小),md
(中),lg
(大),xl
(特大),xxl
(超特大)のいずれかを選択)は、グリッド・システムのビューポイントに準ずる
【注意】
- 指定したビューポート以上でテーブルの幅がコンテナよりも広いときは、はみ出して表示される
【変更履歴】
- 【v5.0.0-alpha1】
.table-responsive-xxl
が追加
Sassでのカスタマイズ(Customizing in Sass)v5.0.0-alpha1新設
- ファクター(因子)変数(
$table-striped-bg-factor
,$table-active-bg-factor
,$table-hover-bg-factor
)は、カラーバリエーション・テーブルのコントラストを決定するのに使用。 light
とdark
以外の各テーマ色は$table-bg-level
変数によって明るくなる。
デフォルトの設定
scss/_variables.scss 内$table-cell-padding: .5rem;
$table-cell-padding-sm: .25rem;
$table-cell-vertical-align: top;
$table-color: $body-color;
$table-bg: transparent;
$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-seperator-color: currentColor;
$table-caption-color: $text-muted;
$table-bg-level: -9;
$table-variants: (
"primary": color-level($primary, $table-bg-level),
"secondary": color-level($secondary, $table-bg-level),
"success": color-level($success, $table-bg-level),
"info": color-level($info, $table-bg-level),
"warning": color-level($warning, $table-bg-level),
"danger": color-level($danger, $table-bg-level),
"light": $light,
"dark": $dark,
);