表格table

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

变体

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

小心！由于用于生成我们的表格变体的 CSS 更为复杂，他们很可能在 v6 之前看不到颜色模式自适应样式。

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

<!-- 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));
    $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在表格和单元格的所有边上添加边框。

#	第一的	最后的	处理
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	小鸟拉里		@推特

网页格式

<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	拉里	鸟	@推特

网页格式

<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通过包装一个with使任何表格在所有视口中响应.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>

SASS

变量

$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:          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:         $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变量照亮了。