在GitHub上查看

表格

使用Bootstrap进行表格选择样式的文档和示例（考虑到它们在JavaScript插件中的普遍使用）。

在本页

概述

由于 <table> 元素在诸如日历和日期选择器之类的第三方小部件中的广泛使用，因此选择使用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 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>

行悬停

添加 .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 ，将所有单元格 padding 减半，使任何 .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 Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.
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 Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.
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. Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. 
<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
1 Mark Otto @mdo
Header Header Header
A First Last
B First Last
C First Last
3 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中的所有 td 和 th ，因此如果没有它，我们的选择器将显得很长。 因此，使用了看起来比较奇特的 .table > :not(caption) > * > * 选择器来定位 .table的所有td 和 th，但没有潜在的嵌套表。

请注意，如果将 <tr> 添加为表的直接子级，则默认情况下，这些 <tr> 将包装在 <tbody> 中，从而使我们的选择器正常工作。

结构组成

表头

与表和深色的表类似，使用修饰符类 .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> 将 .caption-top放在表格的顶部。

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 包装成 .table-responsive，使任何表跨所有视图响应。或者，通过使用 .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-stripeated-bg-factor, $table-active-bg-factor 和 $table-hoverated-bg-factor 用于确定表变量之间的对比。
  • 除了浅色和深色的表格变体之外，主题颜色还通过 $table bg level 变量来点亮。
$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,
);