表格（Tables）

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

On this page

概述

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

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

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

變量

使用語(yǔ)意化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>

向輔助技術(shù)傳達(dá)意義

使用顏色來(lái)增加意義只會(huì)提供一種視覺(jué)指示，而不會(huì)傳達(dá)給輔助技術(shù)（如屏幕閱讀器）的用戶(hù)。確保由顏色表示的信息在內(nèi)容本身（例如可見(jiàn)文本）中是明顯的，或者通過(guò)其他方式包含，例如使用.visually hidden類(lèi)隱藏的其他文本。

強(qiáng)調(diào)表格

條紋行

使用.table-striped在<tbody>范圍內(nèi)任何表格行增加條紋樣式。

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

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

這些類(lèi)也可以添加到表變量中：

#	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可對(duì)<tbody>中的表行啟用懸停狀態(tài)。

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

激活表

通過(guò)添加.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>

變量和表格強(qiáng)調(diào)如何運(yùn)作?

對(duì)于表格強(qiáng)調(diào)（條紋行，可懸停行，以及活動(dòng)表格），我們使用了一些技巧來(lái)使這些效果適用于所有變數(shù)：

我們首先使用--bs-table-bg屬性設(shè)定單元格的背景。所有變數(shù)都加上該自定義屬性使單元格有色彩。如此若將半透明的顏色用作表格背景，我們就??不會(huì)遇到麻煩。
然后，我們?cè)趩卧裆鲜褂胋ackground-image: linear-gradient（var（--bs-table-accent-bg），var（--bs-table-accent-bg））；增加漸變，在指定的上層使用background-color。由于--bs-table-accent-bg預(yù)設(shè)是透明的，因此預(yù)設(shè)就具有不可見(jiàn)的透明線(xiàn)性漸變。
當(dāng)加上任一.table-striped、.table-hover或是.table-active樣式，--bs-table-accent-bg被設(shè)定為半透明背景色。
我們創(chuàng)造了--bs-table-accent-bg變數(shù)具有最高對(duì)比度的顏色。例如，.table-primary的強(qiáng)調(diào)色會(huì)更深，而.table-dark強(qiáng)調(diào)色較淺。
文字和框線(xiàn)色彩生成方式相同，預(yù)設(shè)情形下會(huì)繼承其顏色。

在幕后看起來(lái)像這樣：

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

可以添加邊框顏色實(shí)用程序來(lái)更改顏色：

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

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

無(wú)框的表格

使用.table-borderless使表格呈現(xiàn)無(wú)外部邊框。

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

垂直對(duì)齊

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

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>

嵌套

嵌套表不會(huì)繼承邊框樣式、活動(dòng)樣式和表變量。

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>

嵌套原理

為了防止任何樣式泄漏到嵌套表中，我們?cè)贑SS中使用子組合符（>）選擇器。由于我們需要針對(duì)thead、tbody和tfoot中的所有tds和th，沒(méi)有它，我們的選擇器看起來(lái)會(huì)很長(zhǎng)。因此，我們使用外觀(guān)非常奇怪的.table > :not(caption) > * > * 選擇器來(lái)定位.table的所有tds和TH，但沒(méi)有任何潛在的嵌套表。

結(jié)構(gòu)

表頭

與表格和深色表格類(lèi)似，請(qǐng)使用修改器類(lèi)。.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>

表格標(biāo)題

<caption> 的功能類(lèi)似于表格的標(biāo)題。它幫助屏幕閱讀器的用戶(hù)找到一個(gè)表，了解它的內(nèi)容，并決定他們是否要閱讀它。

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>

響應(yīng)式表格

響應(yīng)式表格呈現(xiàn)水平滾動(dòng)，可以使用.table-responsive包覆.table讓任何響應(yīng)式表格跨裝置使用。或者.table中加入.table-responsive{-sm|-md|-lg|-xl|-xxl}創(chuàng)建響應(yīng)式表格的最大斷點(diǎn)。

垂直剪裁/縮減

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

始終響應(yīng)

.table-responsive 可讓表格水平滾動(dòng)來(lái)跨斷點(diǎn)使用。

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

特定斷點(diǎn)

根據(jù)需要的響應(yīng)式表格設(shè)定.table-responsive{-sm|-md|-lg|-xl|-xxl}。從該斷點(diǎn)開(kāi)始，表格將正常運(yùn)行并且不會(huì)水平滾動(dòng)。

這些表可能會(huì)顯示為斷開(kāi)，直到它們的響應(yīng)樣式應(yīng)用于特定的視窗寬度。

#	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%;

循環(huán)

$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) 用于確定表變量中的對(duì)比度。
除了明表和暗表的變量，主題顏色由$table-bg-level變量變淺。

精品久久久久久亚洲精品_成人午夜网站_www日本高清_亚洲精品久久久久午夜福