表格（Tables）

Bootstrap設置表格文件和示例（提供表格在JavaScript插件程序中的用途）

On this page

概述

由于<table>橫跨其他第三方套件廣泛的使用，像是calendars和date pickers，因此可選擇使用Bootstrap的表格。在任何<table>加上基本類別 .table，接著使用我們的可選修飾類別或是自定義樣式進行擴展。所有表格樣式在Bootstrap中都不會繼承，意味著嵌套表格的樣式都是獨立于父表格。

使用最基本的表格排版，以下是基本的.table在Bootstrap中的外觀。

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

<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>

變量

使用語意化class給表格列或單元格上色。

Class	Heading	Heading
Default	Cell	Cell
Primary	Cell	Cell
Secondary	Cell	Cell
Success	Cell	Cell
Danger	Cell	Cell
Warning	Cell	Cell
Info	Cell	Cell
Light	Cell	Cell
Dark	Cell	Cell

<!-- 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>范圍內任何表格行增加條紋樣式。

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

<table class="table table-striped">
...
</table>

這些類也可以添加到表變量中：

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

<table class="table table-dark table-striped">
...
</table>

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

<table class="table table-success table-striped">
...
</table>

可懸停行

Add.table hover可對<tbody>中的表行啟用懸停狀態。

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

<table class="table table-hover">
...
</table>

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

<table class="table table-dark table-hover">
...
</table>

這些可懸停的行還可以與條帶化變量組合使用：

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

<table class="table table-striped table-hover">
...
</table>

激活表

通過添加.table-active高亮顯示表行或單元格。

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

<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>

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

<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屬性設定單元格的背景。所有變數都加上該自定義屬性使單元格有色彩。如此若將半透明的顏色用作表格背景，我們就??不會遇到麻煩。
然后，我們在單元格上使用background-image: linear-gradient（var（--bs-table-accent-bg），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 為表格和單元格的所有邊添加邊框。

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

<table class="table table-bordered">
...
</table>

可以添加邊框顏色實用程序來更改顏色：

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

<table class="table table-bordered border-primary">
...
</table>

無框的表格

使用.table-borderless使表格呈現無外部邊框。

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

<table class="table table-borderless">
...
</table>

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

<table class="table table-dark table-borderless">
...
</table>

小表格

添加.table-sm將所有單元格填充減半，使任何.table更加緊湊。

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

<table class="table table-sm">
...
</table>

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

<table class="table table-dark table-sm">
...
</table>

垂直對齊

<thead> 的表格單元格始終垂直對齊到底部。<tbody>中的表單元格繼承<table>對齊方式，默認情況下將其對齊到頂部。在需要時可以使用垂直對齊類重新對齊。

Heading 1	Heading 2	Heading 3	Heading 4
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 class="table table-sm table-dark">
<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>
</table>

嵌套

嵌套表不會繼承邊框樣式、活動樣式和表變量。

First

Last

Handle

Mark

Otto

@mdo

Header	Header	Header
A	First	Last
B	First	Last
C	First	Last

Larry

the Bird

@twitter

<table class="table table-striped">
<thead>
...
</thead>
<tbody>
...
<tr>
<td colspan="4">
  <table class="table mb-0">
    ...
  </table>
</td>
</tr>
...
</tbody>
</table>

嵌套原理

為了防止任何樣式泄漏到嵌套表中，我們在CSS中使用子組合符（>）選擇器。由于我們需要針對thead、tbody和tfoot中的所有tds和th，沒有它，我們的選擇器看起來會很長。因此，我們使用外觀非常奇怪的.table > :not(caption) > * > * 選擇器來定位.table的所有tds和TH，但沒有任何潛在的嵌套表。

結構

表頭

與表格和深色表格類似，請使用修改器類。.table-light、.table-dark 使<thead>顯示為淺灰色或深灰色。

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

<table class="table">
<thead class="table-light">
...
</thead>
<tbody>
...
</tbody>
</table>

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

<table class="table">
<thead class="table-dark">
...
</thead>
<tbody>
...
</tbody>
</table>

表尾

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

<table class="table">
<thead>
...
</thead>
<tbody>
...
</tbody>
<tfoot>
...
</tfoot>
</table>

表格標題

<caption> 的功能類似于表格的標題。它幫助屏幕閱讀器的用戶找到一個表，了解它的內容，并決定他們是否要閱讀它。

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

<table class="table table-sm">
<caption>List of users</caption>
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>

您還可以使用.caption-top將 <caption>放在表的頂部。

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

<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-responsive包覆.table讓任何響應式表格跨裝置使用。或者.table中加入.table-responsive{-sm|-md|-lg|-xl|-xxl}創建響應式表格的最大斷點。

垂直剪裁/縮減

響應式表格將超過表格底部或頂部邊緣透過overflow-y: hidden將內容剪裁掉。具體而言，這會裁掉下拉式功能表和其他第三方的插件程序。

始終響應

.table-responsive 可讓表格水平滾動來跨斷點使用。

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

<div class="table-responsive">
<table class="table">
...
</table>
</div>

特定斷點

根據需要的響應式表格設定.table-responsive{-sm|-md|-lg|-xl|-xxl}。從該斷點開始，表格將正常運行并且不會水平滾動。

這些表可能會顯示為斷開，直到它們的響應樣式應用于特定的視窗寬度。

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

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

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

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

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

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

<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>

Sass

變量

$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,
);

自定義

因子變量 ($table-striped-bg-factor, $table-active-bg-factor & $table-hover-bg-factor) 用于確定表變量中的對比度。
除了明表和暗表的變量，主題顏色由$table-bg-level變量變淺。