在 GitHub 上查看

表格

Bootstrap 中表格的文档和示例，可选择性地设置样式（因为它们在 JavaScript 插件中普遍使用）。

示例

由于第三方小部件（如日历和日期选择器）广泛使用表格，我们设计了表格，使其成为选择性功能。只需向任何 <table> 添加基本类 .table，然后使用自定义样式或我们包含的各种修改器类进行扩展。

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

# 第一 最后 句柄
1 标记 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>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

您还可以使用 .table-dark 反转颜色，即在深色背景上使用浅色文本。

# 第一 最后 句柄
1 标记 Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<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> 显示为浅灰色或深灰色。

# 第一 最后 句柄
1 标记 Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# 第一 最后 句柄
1 标记 Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<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 标记 Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<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 标记 Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<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 标记 Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<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 标记 Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<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 标记 Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<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 标记 Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<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 标记 Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<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 标记 Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<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 标记 Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<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 标记 Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<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-responsive{-sm|-md|-lg|-xl} 包装任何 .table 来创建响应式表格，使表格在每个 max-width 断点（分别最大为 576px、768px、992px 和 1120px，但不包括这些断点）处水平滚动。

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

标题

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

用户列表
# 第一 最后 句柄
1 标记 Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<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>

响应式表格

响应式表格允许轻松水平滚动表格。通过用 .table-responsive 包装 .table，使表格在所有视口中都具有响应性。或者，通过使用 .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 单元格 单元格 单元格 单元格 单元格 单元格 单元格 单元格
# 标题 标题 标题 标题 标题 标题 标题 标题
1 单元格 单元格 单元格 单元格 单元格 单元格 单元格 单元格
2 单元格 单元格 单元格 单元格 单元格 单元格 单元格 单元格
3 单元格 单元格 单元格 单元格 单元格 单元格 单元格 单元格
# 标题 标题 标题 标题 标题 标题 标题 标题
1 单元格 单元格 单元格 单元格 单元格 单元格 单元格 单元格
2 单元格 单元格 单元格 单元格 单元格 单元格 单元格 单元格
3 单元格 单元格 单元格 单元格 单元格 单元格 单元格 单元格
# 标题 标题 标题 标题 标题 标题 标题 标题
1 单元格 单元格 单元格 单元格 单元格 单元格 单元格 单元格
2 单元格 单元格 单元格 单元格 单元格 单元格 单元格 单元格
3 单元格 单元格 单元格 单元格 单元格 单元格 单元格 单元格 
<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>