Source

表

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

例子

由于在日历和日期选择器等第三方小部件中广泛使用表格，我们将表格设计为可选择加入的。只需将基类添加.table到 any <table>，然后使用自定义样式或我们包含的各种修饰符类进行扩展。

使用最基本的表格标记，这是.table基于 - 的表格在 Bootstrap 中的外观。所有表格样式都在 Bootstrap 4 中继承，这意味着任何嵌套表格的样式都将与父表格相同。

# 第一的 最后的 处理
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>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

您还可以使用.table-dark.

# 第一的 最后的 处理
1 标记 奥托 @mdo
2 雅各布 桑顿 @胖的
3 拉里 鸟 @推特 
<table class="table table-dark">
  <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>

表头选项

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

# 第一的 最后的 处理
1 标记 奥托 @mdo
2 雅各布 桑顿 @胖的
3 拉里 鸟 @推特
# 第一的 最后的 处理
1 标记 奥托 @mdo
2 雅各布 桑顿 @胖的
3 拉里 鸟 @推特 
<table class="table">
  <thead class="thead-dark">
    <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 class="table">
  <thead class="thead-light">
    <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-striped将斑马条纹添加到<tbody>.

# 第一的 最后的 处理
1 标记 奥托 @mdo
2 雅各布 桑顿 @胖的
3 拉里 鸟 @推特 
<table class="table table-striped">
  <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>
# 第一的 最后的 处理
1 标记 奥托 @mdo
2 雅各布 桑顿 @胖的
3 拉里 鸟 @推特 
<table class="table table-striped table-dark">
  <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-bordered在表格和单元格的所有边添加边框。

# 第一的 最后的 处理
1 标记 奥托 @mdo
2 雅各布 桑顿 @胖的
3 拉里小鸟 @推特 
<table class="table table-bordered">
  <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>
# 第一的 最后的 处理
1 标记 奥托 @mdo
2 雅各布 桑顿 @胖的
3 拉里小鸟 @推特 
<table class="table table-bordered table-dark">
  <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>

无边框表

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

# 第一的 最后的 处理
1 标记 奥托 @mdo
2 雅各布 桑顿 @胖的
3 拉里小鸟 @推特 
<table class="table table-borderless">
  <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>

.table-borderless也可用于深色桌子。

# 第一的 最后的 处理
1 标记 奥托 @mdo
2 雅各布 桑顿 @胖的
3 拉里小鸟 @推特 
<table class="table table-borderless table-dark">
  <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>

可悬停的行

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

# 第一的 最后的 处理
1 标记 奥托 @mdo
2 雅各布 桑顿 @胖的
3 拉里小鸟 @推特 
<table class="table table-hover">
  <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>
# 第一的 最后的 处理
1 标记 奥托 @mdo
2 雅各布 桑顿 @胖的
3 拉里小鸟 @推特 
<table class="table table-hover table-dark">
  <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>

小桌子

通过将单元格填充减半来添加.table-sm以使表格更紧凑。

# 第一的 最后的 处理
1 标记 奥托 @mdo
2 雅各布 桑顿 @胖的
3 拉里小鸟 @推特 
<table class="table table-sm">
  <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>
# 第一的 最后的 处理
1 标记 奥托 @mdo
2 雅各布 桑顿 @胖的
3 拉里小鸟 @推特 
<table class="table table-sm table-dark">
  <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 rows -->
<tr class="table-active">...</tr>

<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-active">...</td>

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

常规表格背景变体不适用于深色表格，但是，您可以使用文本或背景实用程序来实现类似的样式。

# 标题 标题
1 细胞 细胞
2 细胞 细胞
3 细胞 细胞
4 细胞 细胞
5 细胞 细胞
6 细胞 细胞
7 细胞 细胞
8 细胞 细胞
9 细胞 细胞 
<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</td>
</tr>
向辅助技术传达意义

使用颜色来添加含义仅提供视觉指示，不会传达给辅助技术的用户 - 例如屏幕阅读器。确保由颜色表示的信息在内容本身（例如可见文本）中是显而易见的，或者通过替代方式包含在内，例如隐藏在.sr-only类中的附加文本。

.table通过用包装任何内容来创建响应式表格.table-responsive{-sm|-md|-lg|-xl}，使表格在每个max-width断点处水平滚动，分别最多（但不包括）576px、768px、992px 和 1120px。

请注意，由于浏览器当前不支持范围上下文查询，我们通过使用具有更高精度的值来解决具有分数宽度的前缀min-和max-视口的限制（例如，在高 dpi 设备上的某些条件下可能发生） .

字幕

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

用户列表
# 第一的 最后的 处理
1 标记 奥托 @mdo
2 雅各布 桑顿 @胖的
3 拉里 鸟 @推特 
<table class="table">
  <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}.

垂直剪裁/截断

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

始终响应

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

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

断点特定

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

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

# 标题 标题 标题 标题 标题 标题 标题 标题
1 细胞 细胞 细胞 细胞 细胞 细胞 细胞 细胞
2 细胞 细胞 细胞 细胞 细胞 细胞 细胞 细胞
3 细胞 细胞 细胞 细胞 细胞 细胞 细胞 细胞 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# 标题 标题 标题 标题 标题 标题 标题 标题
1 细胞 细胞 细胞 细胞 细胞 细胞 细胞 细胞
2 细胞 细胞 细胞 细胞 细胞 细胞 细胞 细胞
3 细胞 细胞 细胞 细胞 细胞 细胞 细胞 细胞 
<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>
# 标题 标题 标题 标题 标题 标题 标题 标题
1 细胞 细胞 细胞 细胞 细胞 细胞 细胞 细胞
2 细胞 细胞 细胞 细胞 细胞 细胞 细胞 细胞
3 细胞 细胞 细胞 细胞 细胞 细胞 细胞 细胞 
<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>
# 标题 标题 标题 标题 标题 标题 标题 标题
1 细胞 细胞 细胞 细胞 细胞 细胞 细胞 细胞
2 细胞 细胞 细胞 细胞 细胞 细胞 细胞 细胞
3 细胞 细胞 细胞 细胞 细胞 细胞 细胞 细胞 
<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>