Skip to main content Skip to docs navigation
View on GitHub

Tables

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

On this page

概述

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

如果使用最基本的表格标记，以下是Bootstrap中基于.table的表格的外观。

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

变体

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

Heads up! 由于用于生成我们的表格变体的CSS更复杂，很可能要到v6才能看到他们的颜色模式自适应样式。
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>

条纹列

使用.table-striped-columns可以向任何表格列添加斑马线。

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-striped-columns">
  ...
</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-dark table-striped-columns">
  ...
</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>
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-success table-striped-columns">
  ...
</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自定义属性设置表格单元格的背景。 然后，所有表格变体都将该自定义属性设置为使表格单元格着色。 这样，如果半透明的颜色被用作表格背景，我们就不会遇到麻烦。
  • 然后，我们在表格单元格上添加一个插入框阴影，其中包含box-shadow:interest 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的强调色较浅。
  • 文本和边框的颜色以相同的方式生成，并且默认情况下继承它们的颜色。

在幕后，它看起来是这样的：

scss/mixins/_table-variants.scss 
@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-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>

表格分组分隔符

使用.table-group-divider在表格组<thead>、<tbody>和<tfoot>之间添加较厚、较暗的边框。 通过更改“边框顶部颜色”（我们目前没有提供实用程序类）来自定义颜色。

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
html 
<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>

垂直对齐

＜thead＞的表格单元格始终垂直对齐到底部。 <tbody>中的表格单元格从<table>继承对齐方式，默认情况下对齐到顶部。 使用vertical-align类在需要的地方重新对齐。

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

嵌套

边框样式、活动样式和表格变体不会由嵌套表格继承。

# 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 table-bordered">
  <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>'将被包装在‘中，从而使我们的选择器按预期工作。

表格内部组成

表格头

与表格和深色表格类似，使用修饰符类.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
html 
<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-responsive包装.table，使任何表格在所有视口中都具有响应性。 或者，通过使用.table-responsive{-sm|-md|-lg|-xl|-xxl}选择一个最大断点，使响应表格达到该断点。

垂直剪裁/截断

响应式表格使用overflow-y:hidden，它会剪切掉超出表格底部或顶部边缘的任何内容。 特别是，这可以裁剪下拉菜单和其他第三方小部件。

始终响应

在每个断点上，使用“.table-responsived”水平滚动表格。

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

CSS

Sass variables

scss/_variables.scss 
$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 loops

scss/_variables.scss 
$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）用于确定表格变量中的对比度。
  • 除了亮表格和暗表格变体外，主题颜色还通过“$table-bg-scale”变量来点亮。