由於
<table>
橫跨其他第三方套件廣泛的使用，像是 calendars 和 date pickers，因此
可選擇
使用 Bootstrap 的表格。
在任何
<table>
加上基本類別
.table
，接著使用我們的可選修飾類別或是自定義樣式進行擴展。所有表格樣式在 Bootstrap 中都不會繼承，意味著巢狀表格的樣式都是獨立於父表格。
使用最基本的表格排版，以下是基本的
.table
在 Bootstrap 中的外觀。
<!-- 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`) -->
<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>
Conveying meaning to assistive technologies
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.
使用 .table-striped 在 <tbody> 範圍內任何表格行增加條紋樣式。
<th scope="row">3</th>
<td colspan="2" class="table-active">Larry the Bird</td>
<td>@twitter</td>
</tbody>
</table>
<th scope="row">3</th>
<td colspan="2" class="table-active">Larry the Bird</td>
<td>@twitter</td>
</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 在表格和儲存格的四邊上添加邊框。
This cell inherits vertical-align: middle; from the table
This cell inherits vertical-align: middle; from the table
This cell inherits vertical-align: middle; from the table
This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
This cell inherits vertical-align: bottom; from the table row
This cell inherits vertical-align: bottom; from the table row
This cell inherits vertical-align: bottom; from the table row
This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
This cell inherits vertical-align: middle; from the table
This cell inherits vertical-align: middle; from the table
This cell is aligned to the top.
This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
</table>
巢狀如何運作
為了防止
任何
樣式滲透到巢狀表格，我們在 CSS 中使用子選取器 (
>
); 由於我們需要針對所有在
thead
、
tbody
和
tfoot
中的
td
和
th
，若沒有它我們的階層會變得很多。因此，我們使用看起來很奇怪的
.table > :not(caption) > * > *
選擇器來定位所有
.table
中的
td
和
th
，但是沒有任何巢狀表格。
請注意，如果直接將
<tr>
作為表格的子代，則預設會將
<tr>
包裝在
<tbody>
中，從而使我們的選擇器按預期工作。
與表格和深色表格類似，使用修飾符類別
.table-light
或
.table-dark
使
<thead>
呈現淺灰色或深灰色。
</
table
>
響應式表格
響應式表格呈現水平滾動，可以使用
.table-responsive
包覆
.table
讓任何響應式表格跨裝置使用。或者
.table
中加入
.table-responsive{-sm|-md|-lg|-xl|-xxl}
創建響應式表格的最大斷點。
垂直剪裁/縮減
響應式表格將超過表格底部或頂部邊緣透過
overflow-y: hidden
將內容剪裁掉。具體而言，這會裁掉下拉式功能表和其他第三方的外掛程式。
始終呈現響應式
.table-responsive
可讓表格水平滾動來跨斷點使用。
$table-cell-padding-y: .5rem;
$table-cell-padding-x: .5rem;
$table-cell-padding-y-sm: .25rem;
$table-cell-padding-x-sm: .25rem;
$table-cell-vertical-align: top;
$table-color: $body-color;
$table-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,
Customizing
The factor variables ($table-striped-bg-factor, $table-active-bg-factor & $table-hover-bg-factor) are used to determine the contrast in table variants.
Apart from the light & dark table variants, theme colors are lightened by the $table-bg-level variable.
Designed and built with all the love in the world by the Bootstrap team with the help of our contributors.
Code licensed MIT, docs CC BY 3.0.
Currently v5.0.0.
Links
Examples
Themes
Guides
Getting started
Starter template
Webpack
Parcel
Projects
Bootstrap 5
Bootstrap 4
Icons
npm starter
Community
Issues
Discussions
Corporate sponsors
Open Collective
Slack
Stack Overflow
