表格 · Bootstrap 6.0 中文文档

概览

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

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

#	名字	姓氏	用户名
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@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>
    <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>

变体

使用主题特定的颜色类来为表格、表格行或单个单元格设置样式。这些也会适应颜色模式。

类名	标题	标题
默认	Cell	Cell
主要	Cell	Cell
强调	Cell	Cell
成功	Cell	Cell
危险	Cell	Cell
警告	Cell	Cell
信息	Cell	Cell
反转	Cell	Cell
次要	Cell	Cell

HTML

<!-- On tables -->
<table class="table theme-primary">...</table>
<table class="table theme-accent">...</table>
<table class="table theme-success">...</table>
<table class="table theme-danger">...</table>
<table class="table theme-warning">...</table>
<table class="table theme-info">...</table>
<table class="table theme-inverse">...</table>
<table class="table theme-secondary">...</table>


<!-- On rows -->
<tr class="theme-primary">...</tr>
<tr class="theme-accent">...</tr>
<tr class="theme-success">...</tr>
<tr class="theme-danger">...</tr>
<tr class="theme-warning">...</tr>
<tr class="theme-info">...</tr>
<tr class="theme-inverse">...</tr>
<tr class="theme-secondary">...</tr>




<!-- On cells (`td` or `th`) -->
<tr>
  <td class="theme-primary">...</td>
  <td class="theme-accent">...</td>
  <td class="theme-success">...</td>
  <td class="theme-danger">...</td>
  <td class="theme-warning">...</td>
  <td class="theme-info">...</td>
  <td class="theme-inverse">...</td>
  <td class="theme-secondary">...</td>
</tr>

可访问性提示：使用颜色传达含义

仅使用颜色来增加意义只提供视觉提示，这不会传达给使用辅助技术（如屏幕阅读器）的用户。请确保意义从内容本身即可明显体现（例如，可见的文本以及 足够的 颜色对比) 或通过替代方式包含，例如通过隐藏的附加文本 .visually-hidden 班级

带重音符号的表格

条纹行

使用 .table-striped 在 <tbody> 中的任何表格行添加斑马纹。

#	名字	姓氏	用户名
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social

HTML

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

条纹列

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

#	名字	姓氏	用户名
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social

HTML

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

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

#	名字	姓氏	用户名
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social

HTML

<table class="table table-striped" data-bs-theme="dark">
  ...
</table>

#	名字	姓氏	用户名
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social

HTML

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

#	名字	姓氏	用户名
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social

HTML

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

#	名字	姓氏	用户名
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social

HTML

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

可悬停行

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

#	名字	姓氏	用户名
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social

HTML

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

#	名字	姓氏	用户名
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social

HTML

<table class="table table-hover" data-bs-theme="dark">
  ...
</table>

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

#	名字	姓氏	用户名
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social

HTML

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

活跃表格

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

#	名字	姓氏	用户名
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social

HTML


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

#	名字	姓氏	用户名
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social

HTML


<table class="table" data-bs-theme="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-bg-type 或 --bs-table-bg-state 到半透明的颜色，该颜色源自当前主题色。这些值被分层在内嵌盒子阴影中，而 --bs-table-accent-bg 仍然是一个透明的后备。
文本和边框的颜色生成方式相同，并且它们的颜色默认是继承的。

幕后看起来是这样的：

表格边框

带边框的表格

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

#	名字	姓氏	用户名
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social

HTML

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

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

#	名字	姓氏	用户名
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social

HTML

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

无边框表格

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

#	名字	姓氏	用户名
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social

HTML

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

#	名字	姓氏	用户名
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social

HTML

<table class="table table-borderless" data-bs-theme="dark">
  ...
</table>

卡片式表格

需要一个带边框、圆角的表格，但不想将其嵌套在卡片中？将表格包裹起来并剪裁角落。

含水电费

组合边框、边框半径和溢出工具。使用 .mb-0 去掉表格的下边距。

#	名字	姓氏	用户名
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social

HTML

<div class="border rounded overflow-hidden">
  <table class="table table-striped mb-0">
    ...
  </table>
</div>

与 `.table-card`

使用 .table-card 来获得相同的外观。它会像卡片一样圆角，裁剪单元格背景，并移除最后一行的底部边框，以免它堆叠在外层包装上。

#	名字	姓氏	用户名
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social

HTML

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

当表格可能溢出时，将其与响应式包装器结合使用：

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

HTML

<div class="table-responsive table-card">
  <table class="table table-striped">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Heading</th>
        <th scope="col">Heading</th>
        <th scope="col">Heading</th>
        <th scope="col">Heading</th>
        <th scope="col">Heading</th>
        <th scope="col">Heading</th>
        <th scope="col">Heading</th>
        <th scope="col">Heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
    </tbody>
  </table>
</div>

小型表格

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

#	名字	姓氏	用户名
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social

HTML

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

#	名字	姓氏	用户名
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social

HTML

<table class="table table-sm" data-bs-theme="dark">
  ...
</table>

表格分组分隔符

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

#	名字	姓氏	用户名
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@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;` 从桌子上	此单元格顶部对齐。	这里是一段占位文本，用来占据相当多的垂直空间，以演示前面单元格中的垂直对齐效果。

HTML


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

嵌套

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

名字

姓氏

用户名

Mark

Otto

@mdo

标题	标题	标题
A	名字	姓氏
B	名字	姓氏
C	名字	姓氏

John

Doe

@social

HTML


<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> 包裹，从而使我们的选择器按预期工作。

#	名字	姓氏	用户名
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social
页脚	页脚	页脚	页脚

HTML

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

标题

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

用户列表
#	名字	姓氏	用户名
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social

HTML

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

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

用户列表
#	名字	姓氏	用户名
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@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-stacked 当空间有限时，将表格的行转换为堆叠的块。每一行变为一个垂直块，第一格作为加粗标题，其余单元格显示为标签–值对。标签由…生成 data-cell 每个上的属性 <td>.

.table-stacked 和 .table-responsive 都使用容器查询，因此需要 .table-responsive 包装器作为查询容器。使用 .md:table-stacked、.lg:table-stacked 等仅在特定容器宽度下堆叠。默认的 .table-stacked 总是堆叠的。

名称	类型	默认	描述
backdrop	布尔或 'static'	true	包括一个背景元素。指定静态以设置点击时不会关闭的背景。
keyboard	boolean	true	按下退出键时关闭组件。
focus	boolean	true	在初始化时将焦点放在组件上。

HTML


<div class="table-responsive">
<table class="table md:table-stacked">
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Type</th>
      <th scope="col">Default</th>
      <th scope="col">Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-cell="Name">backdrop</td>
      <td data-cell="Type">boolean or 'static'</td>
      <td data-cell="Default">true</td>
      <td data-cell="Description">Includes a backdrop element. Specify static for a backdrop which doesn’t close on click.</td>
    </tr>
    <tr>
      <td data-cell="Name">keyboard</td>
      <td data-cell="Type">boolean</td>
      <td data-cell="Default">true</td>
      <td data-cell="Description">Closes the component when escape key is pressed.</td>
    </tr>
    <tr>
      <td data-cell="Name">focus</td>
      <td data-cell="Type">boolean</td>
      <td data-cell="Default">true</td>
      <td data-cell="Description">Puts the focus on the component when initialized.</td>
    </tr>
  </tbody>
</table>
</div>

HTML

          <!-- Always stacked -->
<div class="table-responsive">
  <table class="table table-stacked">...</table>
</div>

<!-- Stacked below md container width -->
<div class="table-responsive">
  <table class="table md:table-stacked">...</table>
</div>

响应式表格

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

.table-responsive 包装器也充当堆叠表格的容器查询上下文。

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

始终响应

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

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

HTML


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

特定断点

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

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

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

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

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

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

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

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

HTML

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

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

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

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

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

<div class="2xl:table-responsive">
  <table class="table">
    ...
  </table>
</div>

CSS

变量

表格在.table上使用本地 CSS 变量以进行实时定制。CSS 变量的值是从每个组件独有的 Sass map生成，并应用于上述类。

scss/内容/_表格.scss

// stylelint-disable-next-line scss/dollar-variable-default
$table-tokens: defaults(
  (
    --table-cell-padding-y: .5rem,
    --table-cell-padding-x: .5rem,
    --table-cell-vertical-align: top,
    --table-color: var(--fg-body),
    --table-bg: var(--bg-body),
    --table-accent-bg: transparent,
    --table-border-width: var(--border-width),
    --table-border-color: var(--border-color),
    --table-group-separator-color: currentcolor,
    --table-striped-color: var(--table-color),
    --table-striped-bg-factor: 5%,
    --table-striped-bg: color-mix(in srgb, var(--table-color) var(--table-striped-bg-factor), transparent),
    --table-active-color: var(--table-color),
    --table-active-bg-factor: 10%,
    --table-active-bg: color-mix(in srgb, var(--table-color) var(--table-active-bg-factor), transparent),
    --table-hover-color: var(--table-color),
    --table-hover-bg-factor: 7.5%,
    --table-hover-bg: color-mix(in srgb, var(--table-color) var(--table-hover-bg-factor), transparent),
  ),
  $table-tokens
);

自定义

因子变量（--table-striped-bg-factor、--table-active-bg-factor 和 --table-hover-bg-factor）用于确定表格变体的对比度。
除了明亮和暗色表格变体外，主题颜色会通过 --table-bg-scale 变量变亮。

表格

概览

变体

带重音符号的表格

条纹行

条纹列

可悬停行

活跃表格

变体和带重音表是如何工作的？

表格边框

带边框的表格

无边框表格

卡片式表格

含水电费

与 .table-card

小型表格

表格分组分隔符

垂直对齐

嵌套

嵌套是如何工作的

页脚

标题

堆叠表格

响应式表格

始终响应

特定断点

CSS

变量

自定义

与 `.table-card`