Bootstrap 表格

Bootstrap 5 表格

Bootstrap 5 为 HTML 表格提供了优雅且响应式的样式。本节介绍创建各种表格样式的基本类。

基本表格样式

要应用基本的 Bootstrap 样式（轻微内边距和水平分割线），请将 .table 类添加到任何 <table> 元素。

基本表格示例：

<!-- 表格输出的视觉表示 -->
<div style="font-family: sans-serif; margin-bottom: 1rem;">
  <table style="width: 100%; border-collapse: collapse;">
    <thead>
      <tr style="border-bottom: 1px solid #dee2e6;">
        <th style="padding: 0.5rem; text-align: left;">名</th>
        <th style="padding: 0.5rem; text-align: left;">姓</th>
        <th style="padding: 0.5rem; text-align: left;">电子邮件</th>
      </tr>
    </thead>
    <tbody>
      <tr style="border-bottom: 1px solid #dee2e6;">
        <td style="padding: 0.5rem;">约翰</td>
        <td style="padding: 0.5rem;">Doe</td>
        <td style="padding: 0.5rem;">john@example.com</td>
      </tr>
      <tr style="border-bottom: 1px solid #dee2e6;">
        <td style="padding: 0.5rem;">玛丽</td>
        <td style="padding: 0.5rem;">Moe</td>
        <td style="padding: 0.5rem;">mary@example.com</td>
      </tr>
      <tr>
        <td style="padding: 0.5rem;">July</td>
        <td style="padding: 0.5rem;">Dooley</td>
        <td style="padding: 0.5rem;">july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>
<!-- 视觉表示结束 -->

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Firstname</th>
      <th scope="col">Lastname</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>

<!-- 最佳实践：始终使用 `<thead>` 和 `<tbody>` 来确保表格结构正确。使用 `scope="col"` 用于标题单元格 (`<th>`)，使用 `scope="row"` 用于行标题单元格，以提高可访问性。 -->

应用场景：基本表格非常适合显示结构化数据，例如用户列表、产品规格或简单报告。

条纹行

通过应用 .table-striped 类，为表格行添加斑马条纹。这可以提高长表格的可读性。

<table class="table table-striped">
  <thead>
    <tr><th scope="col">#</th><th scope="col">Name</th><th scope="col">Department</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">1</th><td>Alice</td><td>Engineering</td></tr>
    <tr><th scope="row">2</th><td>Bob</td><td>Marketing</td></tr>
    <tr><th scope="row">3</th><td>Carol</td><td>Sales</td></tr>
  </tbody>
</table>

对于条纹列，请使用 .table-striped-columns。

带边框表格

.table-bordered 类会在表格和单元格的所有侧面添加边框，创建更清晰的网格。

<table class="table table-bordered">
  <thead>
    <tr><th scope="col">ID</th><th scope="col">Product</th><th scope="col">Price</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">P101</th><td>Widget A</td><td>$19.99</td></tr>
    <tr><th scope="row">P102</th><td>Gadget B</td><td>$29.99</td></tr>
  </tbody>
</table>

要移除边框，请使用 .table-borderless。

悬停高亮行

通过添加 .table-hover 类，为 <tbody> 内的表格行启用悬停状态。这在用户鼠标悬停在行上时提供视觉反馈。

<table class="table table-hover">
  <thead>
    <tr><th scope="col">Task ID</th><th scope="col">Description</th><th scope="col">Status</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">T001</th><td>Design new logo</td><td>In Progress</td></tr>
    <tr><th scope="row">T002</th><td>Develop homepage</td><td>Pending</td></tr>
    <tr><th scope="row">T003</th><td>User testing</td><td>Completed</td></tr>
  </tbody>
</table>

小型表格（紧凑型）

.table-sm 类（替换了旧的 .table-condensed）通过将单元格内边距减半，使表格更紧凑。这对于信息密集的表格很有用。

<table class="table table-sm table-bordered">
  <thead>
    <tr><th scope="col">#</th><th scope="col">Item</th><th scope="col">Quantity</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">1</th><td>Apples</td><td>10</td></tr>
    <tr><th scope="row">2</th><td>Bananas</td><td>5</td></tr>
  </tbody>
</table>

语境类（行和单元格颜色）

语境类可用于为整个表格行 (<tr>) 或单个单元格 (<td> 或 <th>) 着色。这些类传达语义。

可用于表格的语境类有 .table-active、.table-primary、.table-secondary、.table-success、.table-danger、.table-warning、.table-info、.table-light、.table-dark。

<table class="table">
  <thead>
    <tr><th scope="col">类</th><th scope="col">描述</th><th scope="col">示例数据</th></tr>
  </thead>
  <tbody>
    <tr class="table-primary">
      <th scope="row">.table-primary</th>
      <td>表示主要操作或信息</td>
      <td>新用户注册</td>
    </tr>
    <tr class="table-success">
      <th scope="row">.table-success</th>
      <td>表示成功或积极操作</td>
      <td>付款已接收</td>
    </tr>
    <tr>
      <th scope="row">普通</th>
      <td>标准行</td>
      <td class="table-warning">警告：库存不足</td>
    </tr>
    <tr class="table-danger">
      <th scope="row">.table-danger</th>
      <td>表示危险或潜在负面操作</td>
      <td>账户逾期</td>
    </tr>
  </tbody>
</table>

<!-- 提示：使用深色背景语境类（如 `.table-dark`）时，文本颜色会自动调整以确保对比度。对于其他自定义深色背景，您可能需要添加 `.text-white` 或类似的工具类。 -->

类	描述
.table-active	应用于行或单元格的悬停或选中颜色。
.table-primary	蓝色：表示中性的信息性更改或主要突出。
.table-secondary	灰色：表示不太重要或次要突出。
.table-success	绿色：表示成功或积极操作。
.table-danger	红色：表示危险或潜在负面操作。
.table-warning	黄色：表示需要注意的警告。
.table-info	青色：表示中性的信息性更改或操作。
.table-light	浅灰色：浅色背景。
.table-dark	深灰色/黑色：深色背景（文本变为浅色）。

响应式表格

对于在小屏幕上可能过宽的表格，请用一个带有 .table-responsive 类的 div 包裹 .table。这将使表格在小设备上水平滚动。

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Header 1</th>
        <th scope="col">Header 2</th>
        <th scope="col">Header 3</th>
        <th scope="col">Header 4</th>
        <th scope="col">Header 5</th>
        <th scope="col">Header 6</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>
      </tr>
    </tbody>
  </table>
</div>

<!-- 提示：您还可以使用响应式变体，例如 `.table-responsive-sm`、`.table-responsive-md` 等，使表格仅在特定断点下方可滚动。 -->

应用场景：响应式表格对于数据密集的仪表盘、管理面板以及任何需要在移动设备上访问宽表格的情况至关重要。

Bootstrap 表格完整参考

要获取所有表格功能的全面概述，包括表格标题、深色模式和垂直对齐，请访问官方 Bootstrap 5 文档：https://getbootstrap.com/docs/5.3/content/tables/