表格

概述

¥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 colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

变体

¥Variants

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

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

</tbody>

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

使用 .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 colspan="2" class="table-active">拉里鸟</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">拉里鸟</td> 
      <td>@twitter</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 自定义属性设置表格单元格的背景。然后，所有表格变体都会设置该自定义属性来为表格单元格着色。这样，如果使用半透明颜色作为表格背景，我们就不会遇到麻烦。

  ¥We start by setting the background of a table cell with the --bs-table-bg custom property. 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.

• 然后，我们在带有 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，因此我们没有默认的框阴影。

  ¥Then we add an inset box shadow on the table cells with box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg))); to layer on top of any specified background-color. It uses custom cascade to override the box-shadow, regardless the CSS specificity. Because we use a huge spread and no blur, the color will be monotone. Since --bs-table-accent-bg is set to transparent by default, we don’t have a default box shadow.

• 添加 .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。

  ¥When either .table-striped, .table-striped-columns, .table-hover or .table-active classes are added, either --bs-table-bg-type or --bs-table-bg-state (by default set to initial) are set to a semitransparent color (--bs-table-striped-bg, --bs-table-active-bg or --bs-table-hover-bg) to colorize the background and override default --bs-table-accent-bg.

• 对于每个表变体，我们根据该颜色生成具有最高对比度的 --bs-table-accent-bg 颜色。例如，.table-primary 的强调色较深，而 .table-dark 的强调色较浅。

  ¥For each table variant, we generate a --bs-table-accent-bg color with the highest contrast depending on that color. For example, the accent color for .table-primary is darker while .table-dark has a lighter accent color.

• 文本和边框颜色的生成方式相同，并且默认继承它们的颜色。

  ¥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));
    $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)};
    --#{$prefix}table-active-bg: #{$active-bg};
    --#{$prefix}table-active-color: #{color-contrast($active-bg)};
    --#{$prefix}table-hover-bg: #{$hover-bg};
    --#{$prefix}table-hover-color: #{color-contrast($hover-bg)};

    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>

Border color utilities can be added to change colors:

<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

通过将所有单元 padding 切成两半，添加 .table-sm 以使任何 .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 colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

垂直对齐

¥Vertical alignment

<thead> 的表格单元格始终与底部垂直对齐。<tbody> 中的表格单元格继承了 <table> 的对齐方式，并且默认情况下与顶部对齐。使用 垂直对齐 类在需要时重新对齐。

¥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>Larry</td>
      <td>the Bird</td>
      <td>@twitter</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.

这些表格可能会出现损坏，直到它们的响应样式应用于特定的视口宽度。

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

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）用于确定表变体中的对比。

  ¥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-bg-scale 变量变亮。

  ¥Apart from the light & dark table variants, theme colors are lightened by the $table-bg-scale variable.