跳到主要内容
在 GitHub 查看原文

表格

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

本页目录

概览

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

使用最基本的表格标记，这就是在 Bootstrap 中基于 .table 的表格的样子。

#名字姓氏用户名
1MarkOtto@mdo
2JacobThornton@fat
3JohnDoe@social
<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>John</td>
      <td>Doe</td>
      <td>@social</td>
    </tr>
  </tbody>
</table>

变体

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

注意！ 由于用于生成我们表格变体的 CSS 更加复杂，它们很可能直到 v6 才会看到颜色模式自适应样式。

类名标题标题
默认值CellCell
主要CellCell
次要CellCell
成功CellCell
危险CellCell
警告CellCell
信息CellCell
光CellCell
黑暗CellCell
<!-- 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> 中的任何表格行添加斑马纹。

#名字姓氏用户名
1MarkOtto@mdo
2JacobThornton@fat
3JohnDoe@social
<table class="table table-striped">
  ...
</table>

条纹列

使用 .table-striped-columns 为任意表格列添加斑马条纹效果。

#名字姓氏用户名
1MarkOtto@mdo
2JacobThornton@fat
3JohnDoe@social
<table class="table table-striped-columns">
  ...
</table>

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

#名字姓氏用户名
1MarkOtto@mdo
2JacobThornton@fat
3JohnDoe@social
<table class="table table-dark table-striped">
  ...
</table>
#名字姓氏用户名
1MarkOtto@mdo
2JacobThornton@fat
3JohnDoe@social
<table class="table table-dark table-striped-columns">
  ...
</table>
#名字姓氏用户名
1MarkOtto@mdo
2JacobThornton@fat
3JohnDoe@social
<table class="table table-success table-striped">
  ...
</table>
#名字姓氏用户名
1MarkOtto@mdo
2JacobThornton@fat
3JohnDoe@social
<table class="table table-success table-striped-columns">
  ...
</table>

可悬停行

添加 .table-hover 以在 <tbody> 中启用表格行的悬停状态。

#名字姓氏用户名
1MarkOtto@mdo
2JacobThornton@fat
3JohnDoe@social
<table class="table table-hover">
  ...
</table>
#名字姓氏用户名
1MarkOtto@mdo
2JacobThornton@fat
3JohnDoe@social
<table class="table table-dark table-hover">
  ...
</table>

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

#名字姓氏用户名
1MarkOtto@mdo
2JacobThornton@fat
3JohnDoe@social
<table class="table table-striped table-hover">
  ...
</table>

活跃表格

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

#名字姓氏用户名
1MarkOtto@mdo
2JacobThornton@fat
3JohnDoe@social
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>John</td>
      <td>Doe</td>
      <td class="table-active">@social</td>
    </tr>
  </tbody>
</table>
#名字姓氏用户名
1MarkOtto@mdo
2JacobThornton@fat
3JohnDoe@social
<table class="table table-dark">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>John</td>
      <td>Doe</td>
      <td class="table-active">@social</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 有一个更浅的强调色。
  • 文本和边框颜色的生成方式相同，并且它们的颜色默认是继承的。

幕后看起来是这样的：

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

<span class="token property">--<span class="token variable">#{$prefix}</span>table-color</span><span class="token punctuation">:</span> <span class="token variable">#{$color}</span><span class="token punctuation">;</span>
<span class="token property">--<span class="token variable">#{$prefix}</span>table-bg</span><span class="token punctuation">:</span> <span class="token variable">#{$background}</span><span class="token punctuation">;</span>
<span class="token property">--<span class="token variable">#{$prefix}</span>table-border-color</span><span class="token punctuation">:</span> <span class="token variable">#{$table-border-color}</span><span class="token punctuation">;</span>
<span class="token property">--<span class="token variable">#{$prefix}</span>table-striped-bg</span><span class="token punctuation">:</span> <span class="token variable">#{$striped-bg}</span><span class="token punctuation">;</span>
<span class="token property">--<span class="token variable">#{$prefix}</span>table-striped-color</span><span class="token punctuation">:</span> #<span class="token punctuation">{</span><span class="token function">color-contrast</span><span class="token punctuation">(</span><span class="token variable">$striped-bg</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token property">--<span class="token variable">#{$prefix}</span>table-active-bg</span><span class="token punctuation">:</span> <span class="token variable">#{$active-bg}</span><span class="token punctuation">;</span>
<span class="token property">--<span class="token variable">#{$prefix}</span>table-active-color</span><span class="token punctuation">:</span> #<span class="token punctuation">{</span><span class="token function">color-contrast</span><span class="token punctuation">(</span><span class="token variable">$active-bg</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token property">--<span class="token variable">#{$prefix}</span>table-hover-bg</span><span class="token punctuation">:</span> <span class="token variable">#{$hover-bg}</span><span class="token punctuation">;</span>
<span class="token property">--<span class="token variable">#{$prefix}</span>table-hover-color</span><span class="token punctuation">:</span> #<span class="token punctuation">{</span><span class="token function">color-contrast</span><span class="token punctuation">(</span><span class="token variable">$hover-bg</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--<span class="token variable">#{$prefix}</span>table-color<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">border-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--<span class="token variable">#{$prefix}</span>table-border-color<span class="token punctuation">)</span><span class="token punctuation">;</span>

}
}

表格边框

带边框的表格

在表格和单元格的所有边上添加.table-bordered。

#名字姓氏用户名
1MarkOtto@mdo
2JacobThornton@fat
3JohnDoe@social
<table class="table table-bordered">
  ...
</table>

边框颜色工具类 可以添加以更改颜色：

#名字姓氏用户名
1MarkOtto@mdo
2JacobThornton@fat
3JohnDoe@social
<table class="table table-bordered border-primary">
  ...
</table>

无边框表格

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

#名字姓氏用户名
1MarkOtto@mdo
2JacobThornton@fat
3JohnDoe@social
<table class="table table-borderless">
  ...
</table>
#名字姓氏用户名
1MarkOtto@mdo
2JacobThornton@fat
3JohnDoe@social
<table class="table table-dark table-borderless">
  ...
</table>

小型表格

添加 .table-sm 做任何 .table 通过裁剪所有单元使其更紧凑 padding 一半

#名字姓氏用户名
1MarkOtto@mdo
2JacobThornton@fat
3JohnDoe@social
<table class="table table-sm">
  ...
</table>
#名字姓氏用户名
1MarkOtto@mdo
2JacobThornton@fat
3JohnDoe@social
<table class="table table-dark table-sm">
  ...
</table>

表格分组分隔符

为表格组之间—<thead>、<tbody> 和 <tfoot>—添加更厚、更深的边框，使用 .table-group-divider。通过更改 border-top-color 自定义颜色（我们目前尚未提供该工具类）。

#名字姓氏用户名
1MarkOtto@mdo
2JacobThornton@fat
3JohnDoe@social
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>John</td>
      <td>Doe</td>
      <td>@social</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>

嵌套

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

#名字姓氏用户名
1MarkOtto@mdo
表头表头表头
A名字姓氏
B名字姓氏
C名字姓氏
3JohnDoe@social
<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 中。由于我们需要针对所有的 td和 th在的 thead, tbody，和 tfoot没有它，我们的选择器会显得相当长。因此，我们使用了看起来相当奇怪的 .table > :not(caption) > * > * 选择器用于定位全部 td和 th的 .table，但不包括任何潜在的嵌套表格。

请注意，如果你将 <tr> 添加为表格的直接子元素，这些 <tr> 默认将被 <tbody> 包裹，从而使我们的选择器按预期工作。

解剖学

表头

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

#名字姓氏用户名
1MarkOtto@mdo
2JacobThornton@fat
3JohnDoe@social
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
#名字姓氏用户名
1MarkOtto@mdo
2JacobThornton@fat
3JohnDoe@social
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

表脚

#名字姓氏用户名
1MarkOtto@mdo
2JacobThornton@fat
3JohnDoe@social
页脚页脚页脚页脚
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

字幕

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

用户列表
#名字姓氏用户名
1MarkOtto@mdo
2JacobThornton@fat
3JohnDoe@social
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

你也可以把 <caption> 放在桌子的顶部，和 .caption-top 一起。

用户列表
#名字姓氏用户名
1MarkOtto@mdo
2JacobThornton@fat
3JohnDoe@social
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>John</td>
      <td>Doe</td>
      <td>@social</td>
    </tr>
  </tbody>
</table>

响应式表格

响应式表格允许表格轻松水平滚动。通过用.table包裹.table-responsive，可以使任何表格在所有视口中响应式。或者，通过使用.table-responsive{-sm|-md|-lg|-xl|-xxl}选择一个最大断点，使表格在该断点之前保持响应式。

垂直裁剪/截断

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

始终响应

在每个断点上，对于水平滚动的表格使用 .table-responsive。

#标题标题标题标题标题标题标题标题标题
1CellCellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCellCell
3CellCellCellCellCellCellCellCellCell
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

特定断点

根据需要使用 .table-responsive{-sm|-md|-lg|-xl|-xxl} 创建响应式表格，直到特定的断点。达到该断点及以上，表格将正常显示，不会水平滚动。

这些表格在特定视口宽度下响应样式应用之前，可能看起来是破碎的。

#标题标题标题标题标题标题标题标题
1CellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCell
3CellCellCellCellCellCellCellCell
#标题标题标题标题标题标题标题标题
1CellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCell
3CellCellCellCellCellCellCellCell
#标题标题标题标题标题标题标题标题
1CellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCell
3CellCellCellCellCellCellCellCell
#标题标题标题标题标题标题标题标题
1CellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCell
3CellCellCellCellCellCellCellCell
#标题标题标题标题标题标题标题标题
1CellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCell
3CellCellCellCellCellCellCellCell
#标题标题标题标题标题标题标题标题
1CellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCell
3CellCellCellCellCellCellCellCell
<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 变量

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

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