表格

概述

🌐 Overview

由于 <table> 元素在日历和日期选择器等第三方小部件中被广泛使用，Bootstrap 的表格是 可选择启用 的。将基础类 .table 添加到任何 <table>，然后通过我们的可选修饰类或自定义样式进行扩展。Bootstrap 中的所有表格样式都不会继承，这意味着任何嵌套表格可以独立于父表格进行样式设置。

🌐 Due to the widespread use of <table> elements across third-party widgets like calendars and date pickers, Bootstrap’s tables are opt-in. Add the base class .table to any <table>, then extend with our optional modifier classes or custom styles. All table styles are not inherited in Bootstrap, meaning any nested tables can be styled independent from the parent.

使用最基本的表格标记，这就是基于 .table 的表格在 Bootstrap 中的样子。

🌐 Using the most basic table markup, here’s how .table-based tables look in 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>John</td>
      <td>Doe</td>
      <td>@social</td>
    </tr>
  </tbody>
</table>

变体

🌐 Variants

使用上下文类为表格、表格行或单个单元格着色。

🌐 Use contextual classes to color tables, table rows or individual cells.

<!-- On tables -->
<table class="table table-primary">...</table>
<table class="table table-secondary">...</table>
<table class="table table-success">...</table>
<table class="table table-danger">...</table>
<table class="table table-warning">...</table>
<table class="table table-info">...</table>
<table class="table table-light">...</table>
<table class="table 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

使用 .table-striped 为 <tbody> 内的任何表格行添加斑马条纹效果。

🌐 Use .table-striped to add zebra-striping to any table row within the <tbody>.

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

条纹柱

🌐 Striped columns

使用 .table-striped-columns 为任意表格列添加斑马纹。

🌐 Use .table-striped-columns to add zebra-striping to any table column.

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

这些类也可以添加到表变体中：

🌐 These classes can also be added to table variants:

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

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

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

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

可悬停的行

🌐 Hoverable rows

添加 .table-hover 以在 <tbody> 内的表格行上启用悬停状态。

🌐 Add .table-hover to enable a hover state on table rows within a <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 rows variant:

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

活动表

🌐 Active tables

通过添加 .table-active 类来高亮表格行或单元格。

🌐 Highlight a table row or cell by adding a .table-active class.

<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>John</td>
      <td>Doe</td>
      <td class="table-active">@social</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>John</td>
      <td>Doe</td>
      <td class="table-active">@social</td>
    </tr>
  </tbody>
</table>

变体和重音表如何工作？

🌐 How do the variants and accented tables work?

对于有强调效果的表格（条纹行、条纹列、可悬停行 和 活动表格），我们使用了一些技术，使这些效果适用于我们所有的表格变体：

🌐 For the accented tables (striped rows, striped columns, hoverable rows, and active tables), we used some techniques to make these effects work for all our table variants:

• 我们首先使用 --bs-table-bg 自定义属性设置表格单元格的背景。然后，所有表格变体都会设置该自定义属性来为表格单元格着色。通过这种方式，如果表格背景使用半透明颜色，我们就不会遇到问题。
• 然后我们在带有 box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg))); 的表格单元格上添加内嵌盒子阴影，以叠加在任何指定的 background-color 之上。它使用自定义级联来覆盖 box-shadow，不管 CSS 的特异性如何。由于我们使用了很大的扩展且没有模糊，颜色将是单色的。由于默认情况下 --bs-table-accent-bg 设置为 transparent，所以我们没有默认的盒子阴影。
• 当添加 .table-striped、.table-striped-columns、.table-hover 或 .table-active 类时，--bs-table-bg-type 或 --bs-table-bg-state（默认设置为 initial）会被设置为半透明颜色（--bs-table-striped-bg、--bs-table-active-bg 或 --bs-table-hover-bg）以对背景着色并覆盖默认的 --bs-table-accent-bg。
• 对于每种表格变体，我们会根据该颜色生成具有最高对比度的 --bs-table-accent-bg 颜色。例如，.table-primary 的强调色较深，而 .table-dark 的强调色较浅。
• 文本和边框颜色的生成方式相同，并且默认继承它们的颜色。

在幕后它看起来像这样：

🌐 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));
    $table-border-color: mix($color, $background, percentage($table-border-factor));

    --#{$prefix}table-color: #{$color};
    --#{$prefix}table-bg: #{$background};
    --#{$prefix}table-border-color: #{$table-border-color};
    --#{$prefix}table-striped-bg: #{$striped-bg};
    --#{$prefix}table-striped-color: #{color-contrast($striped-bg)}; // stylelint-disable-line scss/dollar-variable-no-missing-interpolation
    --#{$prefix}table-active-bg: #{$active-bg};
    --#{$prefix}table-active-color: #{color-contrast($active-bg)}; // stylelint-disable-line scss/dollar-variable-no-missing-interpolation
    --#{$prefix}table-hover-bg: #{$hover-bg};
    --#{$prefix}table-hover-color: #{color-contrast($hover-bg)}; // stylelint-disable-line scss/dollar-variable-no-missing-interpolation

    color: var(--#{$prefix}table-color);
    border-color: var(--#{$prefix}table-border-color);
  }
}

表格边框

🌐 Table borders

有边框的表格

🌐 Bordered tables

为表格和单元格的所有边添加 .table-bordered。

🌐 Add .table-bordered for borders on all sides of the table and cells.

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

边框颜色工具 可以用于更改颜色：

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

无边框表格

🌐 Tables without borders

对于没有边框的表格，添加 .table-borderless。

🌐 Add .table-borderless for a table without borders.

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

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

小表格

🌐 Small tables

添加 .table-sm 可通过将所有单元格 padding 对半切割，使任何 .table 更紧凑。

🌐 Add .table-sm to make any .table more compact by cutting all cell padding in half.

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

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

表格组分隔线

🌐 Table group dividers

添加更厚的边框，在表格组 <thead>、<tbody> 和 <tfoot> 之间加深—使用 .table-group-divider。通过更改 border-top-color 来自定义颜色（我们目前没有提供对应的工具类）。

🌐 Add a thicker border, darker between table groups—<thead>, <tbody>, and <tfoot>—with .table-group-divider. Customize the color by changing the border-top-color (which we don’t currently provide a utility class for at this time).

<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 class="table-group-divider">
    <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>John</td>
      <td>Doe</td>
      <td>@social</td>
    </tr>
  </tbody>
</table>

垂直对齐

🌐 Vertical alignment

<thead> 的表格单元格始终垂直对齐到底部。<tbody> 中的表格单元格继承自 <table> 的对齐方式，默认垂直对齐到顶部。使用 vertical align 类在需要时重新对齐。

🌐 Table cells of <thead> are always vertical aligned to the bottom. Table cells in <tbody> inherit their alignment from <table> and are aligned to the top by default. 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 table-bordered">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

嵌套的工作原理

🌐 How nesting works

为了防止任何样式泄露到嵌套表格中，我们在 CSS 中使用子选择器（>）。由于我们需要选中 thead、tbody 和 tfoot 中的所有 td 和 th，如果不使用它，我们的选择器会非常长。因此，我们使用看起来有些奇怪的 .table > :not(caption) > * > * 选择器来选中 .table 中的所有 td 和 th，但不包括任何潜在的嵌套表格。

🌐 To prevent any styles from leaking to nested tables, we use the child combinator (>) selector in our 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. 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.

请注意，如果你将 <tr> 作为表格的直接子元素添加，这些 <tr> 将默认被封装在 <tbody> 中，从而使我们的选择器按预期工作。

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

剖析

🌐 Anatomy

表格头

🌐 Table head

类似于表格和深色表格，使用修饰类 .table-light 或 .table-dark 来使 <thead> 显示为浅灰色或深灰色。

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

一个 <caption> 的功能类似于表格的标题。它帮助使用屏幕阅读器的用户找到表格，理解表格的内容，并决定是否想要阅读它。

🌐 A <caption> functions like a heading for a table. 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>

你也可以把 <caption> 放在桌子上与 .caption-top 一起放置。

🌐 You can also put the <caption> on the top of the table with .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>John</td>
      <td>Doe</td>
      <td>@social</td>
    </tr>
  </tbody>
</table>

响应式表格

🌐 Responsive tables

响应式表格允许表格轻松水平滚动。通过用 .table-responsive 封装 .table，可以使任何表格在所有视口上响应式。或者，使用 .table-responsive{-sm|-md|-lg|-xl|-xxl} 选择一个最大断点，使表格在该断点及以下响应式。

🌐 Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .table with .table-responsive. Or, pick a maximum breakpoint with which to have a responsive table up to by using .table-responsive{-sm|-md|-lg|-xl|-xxl}.

始终响应

🌐 Always responsive

在每个断点上，对水平滚动的表格使用 .table-responsive。

🌐 Across every breakpoint, use .table-responsive for horizontally scrolling tables.

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

断点特定

🌐 Breakpoint specific

根据需要使用 .table-responsive{-sm|-md|-lg|-xl|-xxl} 创建响应式表格，直到特定的断点。从该断点及以上，表格将正常显示，不会水平滚动。

🌐 Use .table-responsive{-sm|-md|-lg|-xl|-xxl} as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.

这些表格在特定视口宽度下响应式样式应用之前，可能看起来是破碎的。

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

CSS

Sass 变量

🌐 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:                 var(--#{$prefix}emphasis-color);
$table-bg:                    var(--#{$prefix}body-bg);
$table-accent-bg:             transparent;

$table-th-font-weight:        null;

$table-striped-color:         $table-color;
$table-striped-bg-factor:     .05;
$table-striped-bg:            rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor);

$table-active-color:          $table-color;
$table-active-bg-factor:      .1;
$table-active-bg:             rgba(var(--#{$prefix}emphasis-color-rgb), $table-active-bg-factor);

$table-hover-color:           $table-color;
$table-hover-bg-factor:       .075;
$table-hover-bg:              rgba(var(--#{$prefix}emphasis-color-rgb), $table-hover-bg-factor);

$table-border-factor:         .2;
$table-border-width:          var(--#{$prefix}border-width);
$table-border-color:          var(--#{$prefix}border-color);

$table-striped-order:         odd;
$table-striped-columns-order: even;

$table-group-separator-color: currentcolor;

$table-caption-color:         var(--#{$prefix}secondary-color);

$table-bg-scale:              -80%;

Sass 循环

🌐 Sass loops

$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

• 因子变量（$table-striped-bg-factor、$table-active-bg-factor 和 $table-hover-bg-factor）用于确定表格变体中的对比。
• 除了明暗表格变体外，主题颜色由 $table-bg-scale 变量调亮。