跳至主要内容 跳至文档导航

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

变体

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

注意!由于生成表格变体所用的 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> 中的任何表格行添加斑马条纹。

# 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: 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,因此我们没有默认框阴影。
  • 当添加 .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 的强调色较浅。
  • 文本和边框颜色以相同的方式生成,默认情况下会继承其颜色。

在幕后看起来像这样

@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 使任何 .table 更加紧凑,方法是将所有单元格 padding 减半。

# 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>)之间添加较粗的边框,颜色较深。通过更改 border-top-color(我们目前不为此提供实用程序类)来自定义颜色。

# 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> 继承其对齐方式,默认情况下对齐到顶部。使用 垂直对齐 类在需要时重新对齐。

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

嵌套

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

# First Last Handle
1 Mark Otto @mdo
标题 标题 标题
A First Last
B First Last
C First Last
3 拉里 @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 中使用了子组合器 (>) 选择器。由于我们需要定位 theadtbodytfoot 中的所有 tdth,因此如果没有它,我们的选择器看起来会很长。因此,我们使用看起来相当奇怪的 .table > :not(caption) > * > * 选择器来定位 .table 的所有 tdth,但不会定位任何潜在的嵌套表格。

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

解剖

表格表头

与表格和深色表格类似,使用修饰符类 .table-light.table-dark 使 <thead> 呈现浅灰色或深灰色。

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 拉里 @twitter
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 拉里 @twitter
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

表格页脚

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 拉里 @twitter
页脚 页脚 页脚 页脚
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

标题

<caption> 用作表格的标题。它帮助使用屏幕阅读器的用户查找表格并了解其内容,并决定是否要阅读它。

用户列表
# 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-top<caption> 放在表格顶部。

用户列表
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 拉里 @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-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>

CSS

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}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 循环

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