表

使用 Bootstrap 选择加入表格样式的文档和示例（鉴于它们在 JavaScript 插件中的普遍使用）。

在本页面

概述

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

使用最基本的表格标记，这是.table基于 - 的表格在 Bootstrap 中的外观。

#	第一的	最后的	处理
1	标记	奥托	@mdo
2	雅各布	桑顿	@胖的
3	拉里小鸟		@推特

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

变体

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

班级	标题	标题
默认	细胞	细胞
基本的	细胞	细胞
中学	细胞	细胞
成功	细胞	细胞
危险	细胞	细胞
警告	细胞	细胞
信息	细胞	细胞
光	细胞	细胞
黑暗的	细胞	细胞

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

#	第一的	最后的	处理
1	标记	奥托	@mdo
2	雅各布	桑顿	@胖的
3	拉里小鸟		@推特

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

条纹列

用于.table-striped-columns将斑马条纹添加到任何表格列。

#	第一的	最后的	处理
1	标记	奥托	@mdo
2	雅各布	桑顿	@胖的
3	拉里小鸟		@推特

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

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

#	第一的	最后的	处理
1	标记	奥托	@mdo
2	雅各布	桑顿	@胖的
3	拉里小鸟		@推特

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

#	第一的	最后的	处理
1	标记	奥托	@mdo
2	雅各布	桑顿	@胖的
3	拉里小鸟		@推特

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

#	第一的	最后的	处理
1	标记	奥托	@mdo
2	雅各布	桑顿	@胖的
3	拉里小鸟		@推特

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

#	第一的	最后的	处理
1	标记	奥托	@mdo
2	雅各布	桑顿	@胖的
3	拉里小鸟		@推特

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

可悬停的行

添加.table-hover以在<tbody>.

#	第一的	最后的	处理
1	标记	奥托	@mdo
2	雅各布	桑顿	@胖的
3	拉里小鸟		@推特

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

#	第一的	最后的	处理
1	标记	奥托	@mdo
2	雅各布	桑顿	@胖的
3	拉里小鸟		@推特

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

这些可悬停的行也可以与条纹行变体结合使用：

#	第一的	最后的	处理
1	标记	奥托	@mdo
2	雅各布	桑顿	@胖的
3	拉里小鸟		@推特

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

活动表

.table-active通过添加类突出显示表格行或单元格。

#	第一的	最后的	处理
1	标记	奥托	@mdo
2	雅各布	桑顿	@胖的
3	拉里小鸟		@推特

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

#	第一的	最后的	处理
1	标记	奥托	@mdo
2	雅各布	桑顿	@胖的
3	拉里小鸟		@推特

<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: inset 0 0 0 9999px var(--bs-table-accent-bg);在任何指定的background-color. 因为我们使用了巨大的传播并且没有模糊，所以颜色会是单调的。由于--bs-table-accent-bg默认情况下未设置，因此我们没有默认的盒子阴影。
当添加.table-striped、或类时，将.table-striped-columns设置为半透明颜色以对背景进行着色。.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));
    $border-color: mix($color, $background, percentage($table-border-factor));

    --#{$prefix}table-color: #{$color};
    --#{$prefix}table-bg: #{$background};
    --#{$prefix}table-border-color: #{$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在表格和单元格的所有边添加边框。

#	第一的	最后的	处理
1	标记	奥托	@mdo
2	雅各布	桑顿	@胖的
3	拉里小鸟		@推特

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

可以添加边框颜色实用程序来更改颜色：

#	第一的	最后的	处理
1	标记	奥托	@mdo
2	雅各布	桑顿	@胖的
3	拉里小鸟		@推特

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

无边框表格

为没有边框的表格添加.table-borderless。

#	第一的	最后的	处理
1	标记	奥托	@mdo
2	雅各布	桑顿	@胖的
3	拉里小鸟		@推特

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

#	第一的	最后的	处理
1	标记	奥托	@mdo
2	雅各布	桑顿	@胖的
3	拉里小鸟		@推特

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

小桌子

通过将所有单元格切成两半来添加.table-sm以使其.table更紧凑。padding

#	第一的	最后的	处理
1	标记	奥托	@mdo
2	雅各布	桑顿	@胖的
3	拉里小鸟		@推特

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

#	第一的	最后的	处理
1	标记	奥托	@mdo
2	雅各布	桑顿	@胖的
3	拉里小鸟		@推特

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

表组分隔符

在表格组之间添加更粗的边框，更暗 - <thead>，<tbody>和<tfoot>-with .table-group-divider。通过更改自定义颜色border-top-color（我们目前不提供实用程序类）。

#	第一的	最后的	处理
1	标记	奥托	@mdo
2	雅各布	桑顿	@胖的
3	拉里小鸟		@推特

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>并与顶部对齐。使用垂直对齐类在需要的地方重新对齐。

标题 1	标题 2	标题 3	标题 4
此单元格继承`vertical-align: middle;`自表格	此单元格继承`vertical-align: middle;`自表格	此单元格继承`vertical-align: middle;`自表格	这是一些占位符文本，旨在占用相当多的垂直空间，以演示垂直对齐在前面的单元格中是如何工作的。
此单元格继承`vertical-align: bottom;`自表格行	此单元格继承`vertical-align: bottom;`自表格行	此单元格继承`vertical-align: bottom;`自表格行	这是一些占位符文本，旨在占用相当多的垂直空间，以演示垂直对齐在前面的单元格中是如何工作的。
此单元格继承`vertical-align: middle;`自表格	此单元格继承`vertical-align: middle;`自表格	此单元格与顶部对齐。	这是一些占位符文本，旨在占用相当多的垂直空间，以演示垂直对齐在前面的单元格中是如何工作的。

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

嵌套

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

第一的

最后的

处理

标记

奥托

@mdo

标题	标题	标题
一个	第一的	最后的
乙	第一的	最后的
C	第一的	最后的

拉里

鸟

@推特

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

嵌套的工作原理

为了防止任何样式泄漏到嵌套表中，我们>在 CSS 中使用子组合器 ( ) 选择器。由于我们需要定位 , 和中的所有std和ths，thead如果没有它，我们的选择器看起来会很长。因此，我们使用看起来很奇怪的选择器来定位的所有s 和s ，但没有任何潜在的嵌套表。tbodytfoot.table > :not(caption) > * > *tdth.table

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

解剖学

表头

与表和暗表类似，使用修饰符类.table-light或.table-dark使<thead>s 显示为浅灰色或深灰色。

#	第一的	最后的	处理
1	标记	奥托	@mdo
2	雅各布	桑顿	@胖的
3	拉里	鸟	@推特

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

#	第一的	最后的	处理
1	标记	奥托	@mdo
2	雅各布	桑顿	@胖的
3	拉里	鸟	@推特

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

桌脚

#	第一的	最后的	处理
1	标记	奥托	@mdo
2	雅各布	桑顿	@胖的
3	拉里	鸟	@推特
页脚	页脚	页脚	页脚

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

字幕

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

用户列表
#	第一的	最后的	处理
1	标记	奥托	@mdo
2	雅各布	桑顿	@胖的
3	拉里小鸟		@推特

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

您也可以使用将放在<caption>桌子的顶部.caption-top。

用户列表
#	第一的	最后的	处理
1	标记	奥托	@mdo
2	雅各布	桑顿	@胖的
3	拉里	鸟	@推特

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>

响应式表

响应式表格允许表格轻松水平滚动。通过将 a 包裹起来，使任何表格在所有视口中都具有响应.table性.table-responsive。或者，选择一个最大断点，通过使用.table-responsive{-sm|-md|-lg|-xl|-xxl}.

垂直剪裁/截断

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

始终响应

跨越每个断点，.table-responsive用于水平滚动表格。

#	标题	标题	标题	标题	标题	标题	标题	标题	标题
1	细胞	细胞	细胞	细胞	细胞	细胞	细胞	细胞	细胞
2	细胞	细胞	细胞	细胞	细胞	细胞	细胞	细胞	细胞
3	细胞	细胞	细胞	细胞	细胞	细胞	细胞	细胞	细胞

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

断点特定

根据需要使用.table-responsive{-sm|-md|-lg|-xl|-xxl}创建响应表直到特定断点。从该断点开始，表格将正常运行并且不会水平滚动。

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

#	标题	标题	标题	标题	标题	标题	标题	标题
1	细胞	细胞	细胞	细胞	细胞	细胞	细胞	细胞
2	细胞	细胞	细胞	细胞	细胞	细胞	细胞	细胞
3	细胞	细胞	细胞	细胞	细胞	细胞	细胞	细胞

#	标题	标题	标题	标题	标题	标题	标题	标题
1	细胞	细胞	细胞	细胞	细胞	细胞	细胞	细胞
2	细胞	细胞	细胞	细胞	细胞	细胞	细胞	细胞
3	细胞	细胞	细胞	细胞	细胞	细胞	细胞	细胞

#	标题	标题	标题	标题	标题	标题	标题	标题
1	细胞	细胞	细胞	细胞	细胞	细胞	细胞	细胞
2	细胞	细胞	细胞	细胞	细胞	细胞	细胞	细胞
3	细胞	细胞	细胞	细胞	细胞	细胞	细胞	细胞

#	标题	标题	标题	标题	标题	标题	标题	标题
1	细胞	细胞	细胞	细胞	细胞	细胞	细胞	细胞
2	细胞	细胞	细胞	细胞	细胞	细胞	细胞	细胞
3	细胞	细胞	细胞	细胞	细胞	细胞	细胞	细胞

#	标题	标题	标题	标题	标题	标题	标题	标题
1	细胞	细胞	细胞	细胞	细胞	细胞	细胞	细胞
2	细胞	细胞	细胞	细胞	细胞	细胞	细胞	细胞
3	细胞	细胞	细胞	细胞	细胞	细胞	细胞	细胞

#	标题	标题	标题	标题	标题	标题	标题	标题
1	细胞	细胞	细胞	细胞	细胞	细胞	细胞	细胞
2	细胞	细胞	细胞	细胞	细胞	细胞	细胞	细胞
3	细胞	细胞	细胞	细胞	细胞	细胞	细胞	细胞

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

萨斯

变量

$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}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:          var(--#{$prefix}border-color);

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

$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,
);

定制

因子变量 ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) 用于确定表变体中的对比度。
除了浅色和深色表变体外，主题颜色还通过$table-bg-scale变量变亮。