Tables表格

Overview概述

Due to the widespread use of <table> elements across third-party widgets like calendars and date pickers, Bootstrap’s tables are opt-in. 由于<table>第三方窗口小部件（如日历和日期选择器）中的元素以及Bootstrap的表都是opt-in。Add the base class .table to any <table>, then extend with our optional modifier classes or custom styles. 将基类.table添加到任意<table>，然后使用可选的修改器类或自定义样式进行扩展。All table styles are not inherited in Bootstrap, meaning any nested tables can be styled independent from the parent.所有表样式都不会在Bootstrap中继承，这意味着任何嵌套表的样式都可以独立于父表。

Using the most basic table markup, here’s how .table-based tables look in Bootstrap.使用最基本的表标记，以下是基于.table的表格在Bootstrap中的外观。

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

Variants变体

Use contextual classes to color tables, table rows or individual cells.使用上下文类为表格、表格行或单个单元格着色。

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

Accented tables重音表

Striped rows条纹行

Use .table-striped to add zebra-striping to any table row within the <tbody>.使用.table-striped将斑马条纹添加到<tbody>。

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

These classes can also be added to table variants:这些类也可以添加到表变量中：

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

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

Hoverable rows可悬停行

Add .table-hover to enable a hover state on table rows within a <tbody>.添加.table-hover可在<tbody>中的表行上启用悬停状态。

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

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

These hoverable rows can also be combined with the striped variant:这些可悬停行也可以与条带化变量组合使用：

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

Active tables活动表格

Highlight a table row or cell by adding a .table-active class.通过添加.table-active类高亮显示表格行或单元格。

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

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

How do the variants and accented tables work?变体和重音表是如何工作的？

For the accented tables (striped rows, hoverable rows, and active tables), we used some techniques to make these effects work for all our table variants:对于强调表（条带行、可悬停行和活动表），我们使用了一些技术使这些效果适用于所有表格变体：

• We start by setting the background of a table cell with the --bs-table-bg custom property. 我们首先使用--bs-table-bg自定义属性设置表单元格的背景。All table variants then set that custom property to colorize the table cells. 然后，所有表格变量将该自定义属性设置为表格单元格的颜色。This way, we don’t get into trouble if semi-transparent colors are used as table backgrounds.这样，如果半透明颜色用作表格背景，我们就不会遇到麻烦。
• Then we add an inset box shadow on the table cells with box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg); to layer on top of any specified background-color. 然后我们使用box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);在表格单元格上添加内嵌盒阴影，以将图层置于任意指定background-color的顶部。Because we use a huge spread and no blur, the color will be monotone. 因为我们使用了一个巨大的蔓延，没有模糊，颜色将是单调的。Since --bs-table-accent-bg is unset by default, we don’t have a default box shadow.由于默认情况下--bs-table-accent-bg是未设置的，因此我们没有默认的框阴影。
• When either .table-striped, .table-hover or .table-active classes are added, the --bs-table-accent-bg is set to a semitransparent color to colorize the background.当添加.table-striped、.table-hover或.table-active类时，--bs-table-accent-bg被设置为半透明颜色以着色背景。
• For each table variant, we generate a --bs-table-accent-bg color with the highest contrast depending on that color. 对于每个表变量，我们生成一个--bs-table-accent-bg颜色，根据该颜色使用最高的对比度。For example, the accent color for .table-primary is darker while .table-dark has a lighter accent color.例如，.table-primary的强调色较深，而.table-dark的强调色较浅。
• Text and border colors are generated the same way, and their colors are inherited by default.文本和边框颜色以相同的方式生成，默认情况下继承它们的颜色。

Behind the scenes it looks like this:在幕后看起来是这样的：

@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 borders表格边框

Bordered tables带边框的表格

Add .table-bordered for borders on all sides of the table and cells.添加.table-bordered以使表格和单元格的所有边都有边框。

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

Border color utilities can be added to change colors:可以添加边框颜色实用程序来更改颜色：

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

Tables without borders无边框表格

Add .table-borderless for a table without borders.对于无边框的表，添加.table-borderless。

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

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

Small tables小型表格

Add .table-sm to make any .table more compact by cutting all cell padding in half.添加.table-sm，通过将所有单元格padding减半，使任意.table更加紧凑。

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

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

Vertical alignment对齐方式

Table cells of <thead> are always vertical aligned to the bottom. <thead>的表格单元格始终是向底部对齐的。Table cells in <tbody> inherit their alignment from <table> and are aligned to the the top by default. <tbody>中的表格单元格继承<table>的对齐方式，默认向顶部对齐。Use the vertical align classes to re-align where needed.请使用对齐方式类来根据需要重新对齐。

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

Nesting嵌套

Border styles, active styles, and table variants are not inherited by nested tables.嵌套表不会继承边框样式、活动样式和表变体。

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

How nesting works嵌套的工作原理

To prevent any styles from leaking to nested tables, we use the child combinator (>) selector in our CSS. 为了防止任何样式泄漏到嵌套表中，我们在我们的CSS中使用子组合器（>）选择器。Since we need to target all the tds and ths in the thead, tbody, and tfoot, our selector would look pretty long without it. 由于我们需要针对thead、tbody和tfoot中的所有td和th，因此如果没有它，我们的选择器看起来会很长。As such, we use the rather odd looking .table > :not(caption) > * > * selector to target all tds and ths of the .table, but none of any potential nested tables.因此，我们使用了形式相当奇怪的.table > :not(caption) > * > *选择器以瞄准.table的td和th，但是没有瞄准任何潜在的嵌套表。

Note that if you add <tr>s as direct children of a table, those <tr> will be wrapped in a <tbody> by default, thus making our selectors work as intended.请注意，如果添加<tr>作为表格的直接子项，默认情况下这些<tr>将用<tbody>，使选择器能按预期工作。

Anatomy解剖

Table head表格头

Similar to tables and dark tables, use the modifier classes .table-light or .table-dark to make <thead>s appear light or dark gray.与表格和暗表格类似，使用修饰符类.table-light或.table-dark使<thead>显示为浅灰色或深灰色。

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

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

Table foot表格脚

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

Captions标题

A <caption> functions like a heading for a table. <caption>功能类似于表格的标题。It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.它帮助屏幕阅读器的用户找到一个表格，了解它的内容，并决定他们是否想要阅读它。

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

You can also put the <caption> on the top of the table with .caption-top.您还可以将<caption>放在带有.caption-top类的表格的顶部，。

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

Responsive tables响应表

Responsive tables allow tables to be scrolled horizontally with ease. 响应表格允许轻松地水平滚动表格。Make any table responsive across all viewports by wrapping a .table with .table-responsive. 通过使用.table-responsive包装.table，使任何表格在所有视口中都具有响应性。Or, pick a maximum breakpoint with which to have a responsive table up to by using .table-responsive{-sm|-md|-lg|-xl|-xxl}.或者，通过使用.table-responsive{-sm|-md|-lg|-xl|-xxl}选择一个最大断点，使响应表可以使用该断点。

Always responsive始终是响应式

Across every breakpoint, use .table-responsive for horizontally scrolling tables.在每个断点上，使用.table-responsive来水平滚动表。

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

Breakpoint specific断点特定

Use .table-responsive{-sm|-md|-lg|-xl|-xxl} as needed to create responsive tables up to a particular breakpoint. 根据需要使用.table-responsive{-sm|-md|-lg|-xl|-xxl}来创建到达特定断点的响应表。From that breakpoint and up, the table will behave normally and not scroll horizontally.从该断点开始，表将正常运行，不会水平滚动。

These tables may appear broken until their responsive styles apply at specific viewport widths.这些表可能会出现中断，直到它们的响应样式应用于特定的视口宽度。

<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

Variables变量

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

Loop循环

$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.因子变量（$table-striped-bg-factor、$table-active-bg-factor和$table-hover-bg-factor）用于确定表变量中的对比度。
• Apart from the light & dark table variants, theme colors are lightened by the $table-bg-level variable.除了亮和暗表格变体，主题颜色由$table-bg-level变量点亮。