表格

使用Bootstrap使用表格的文档和示例（表格样式及响应式优先于BootStrap全局的其它JavaScript事件）。

示例

在第三方部件例如日历和日期选择器中广泛使用表格，我们设计了视情况需要加入的表格类。只需要向某个<table>添加一个基类.table，然后通过自定义样式或系统提供的class来起作用。

使用最基本的表格标记，下面是Bootstrap中 .table表格的样式（基本样式）， Bootstrap 4继承了所有的表格样式，这意味着任何嵌套表格都将以与父类型相同的方式进行样式化。

表格 - 图1

  1. <table class="table">
  2.   <thead>
  3.     <tr>
  4.       <th scope="col">#</th>
  5.       <th scope="col">First Name</th>
  6.       <th scope="col">Last Name</th>
  7.       <th scope="col">Username</th>
  8.     </tr>
  9.   </thead>
  10.   <tbody>
  11.     <tr>
  12.       <th scope="row">1</th>
  13.       <td>Mark</td>
  14.       <td>Otto</td>
  15.       <td>@mdo</td>
  16.     </tr>
  17.     <tr>
  18.       <th scope="row">2</th>
  19.       <td>Jacob</td>
  20.       <td>Thornton</td>
  21.       <td>@fat</td>
  22.     </tr>
  23.     <tr>
  24.       <th scope="row">3</th>
  25.       <td>Larry</td>
  26.       <td>the Bird</td>
  27.       <td>@twitter</td>
  28.     </tr>
  29.   </tbody>
  30. </table>

你可使用.table-darkclass选择器来产生颜色反转对比效果，即深色背景和浅色文本。

表格 - 图2

  1. <table class="table table-dark">
  2.   <thead>
  3.     <tr>
  4.       <th scope="col">#</th>
  5.       <th scope="col">First Name</th>
  6.       <th scope="col">Last Name</th>
  7.       <th scope="col">Username</th>
  8.     </tr>
  9.   </thead>
  10.   <tbody>
  11.     <tr>
  12.       <th scope="row">1</th>
  13.       <td>Mark</td>
  14.       <td>Otto</td>
  15.       <td>@mdo</td>
  16.     </tr>
  17.     <tr>
  18.       <th scope="row">2</th>
  19.       <td>Jacob</td>
  20.       <td>Thornton</td>
  21.       <td>@fat</td>
  22.     </tr>
  23.     <tr>
  24.       <th scope="row">3</th>
  25.       <td>Larry</td>
  26.       <td>the Bird</td>
  27.       <td>@twitter</td>
  28.     </tr>
  29.   </tbody>
  30. </table>

Head表头处理

与预设的反转样式相似，使用.thead-light 或.thead-dark 中的一个样式，就能使 <thead>区显示出浅黑或深灰。

表格 - 图3

  1. <table class="table">
  2.   <thead class="thead-dark">
  3.     <tr>
  4.       <th scope="col">#</th>
  5.       <th scope="col">First Name</th>
  6.       <th scope="col">Last Name</th>
  7.       <th scope="col">Username</th>
  8.     </tr>
  9.   </thead>
  10.   <tbody>
  11.     <tr>
  12.       <th scope="row">1</th>
  13.       <td>Mark</td>
  14.       <td>Otto</td>
  15.       <td>@mdo</td>
  16.     </tr>
  17.     <tr>
  18.       <th scope="row">2</th>
  19.       <td>Jacob</td>
  20.       <td>Thornton</td>
  21.       <td>@fat</td>
  22.     </tr>
  23.     <tr>
  24.       <th scope="row">3</th>
  25.       <td>Larry</td>
  26.       <td>the Bird</td>
  27.       <td>@twitter</td>
  28.     </tr>
  29.   </tbody>
  30. </table>
  32. <table class="table">
  33.   <thead class="thead-light">
  34.     <tr>
  35.       <th scope="col">#</th>
  36.       <th scope="col">First Name</th>
  37.       <th scope="col">Last Name</th>
  38.       <th scope="col">Username</th>
  39.     </tr>
  40.   </thead>
  41.   <tbody>
  42.     <tr>
  43.       <th scope="row">1</th>
  44.       <td>Mark</td>
  45.       <td>Otto</td>
  46.       <td>@mdo</td>
  47.     </tr>
  48.     <tr>
  49.       <th scope="row">2</th>
  50.       <td>Jacob</td>
  51.       <td>Thornton</td>
  52.       <td>@fat</td>
  53.     </tr>
  54.     <tr>
  55.       <th scope="row">3</th>
  56.       <td>Larry</td>
  57.       <td>the Bird</td>
  58.       <td>@twitter</td>
  59.     </tr>
  60.   </tbody>
  61. </table>

条纹状表格

使用 .table-striped 样式定义 <tbody>，可以产生逐行颜色强烈对比的表格样式（以及增加反转）。

表格 - 图4

  1. <table class="table table-striped">
  2.   <thead>
  3.     <tr>
  4.       <th scope="col">#</th>
  5.       <th scope="col">First Name</th>
  6.       <th scope="col">Last Name</th>
  7.       <th scope="col">Username</th>
  8.     </tr>
  9.   </thead>
  10.   <tbody>
  11.     <tr>
  12.       <th scope="row">1</th>
  13.       <td>Mark</td>
  14.       <td>Otto</td>
  15.       <td>@mdo</td>
  16.     </tr>
  17.     <tr>
  18.       <th scope="row">2</th>
  19.       <td>Jacob</td>
  20.       <td>Thornton</td>
  21.       <td>@fat</td>
  22.     </tr>
  23.     <tr>
  24.       <th scope="row">3</th>
  25.       <td>Larry</td>
  26.       <td>the Bird</td>
  27.       <td>@twitter</td>
  28.     </tr>
  29.   </tbody>
  30. </table>

表格 - 图5

  1. <table class="table table-striped table-dark">
  2.   <thead>
  3.     <tr>
  4.       <th scope="col">#</th>
  5.       <th scope="col">First Name</th>
  6.       <th scope="col">Last Name</th>
  7.       <th scope="col">Username</th>
  8.     </tr>
  9.   </thead>
  10.   <tbody>
  11.     <tr>
  12.       <th scope="row">1</th>
  13.       <td>Mark</td>
  14.       <td>Otto</td>
  15.       <td>@mdo</td>
  16.     </tr>
  17.     <tr>
  18.       <th scope="row">2</th>
  19.       <td>Jacob</td>
  20.       <td>Thornton</td>
  21.       <td>@fat</td>
  22.     </tr>
  23.     <tr>
  24.       <th scope="row">3</th>
  25.       <td>Larry</td>
  26.       <td>the Bird</td>
  27.       <td>@twitter</td>
  28.     </tr>
  29.   </tbody>
  30. </table>

表格边框处理

添加 .table-bordered 类可以产生表格边框与间隙系统。

表格 - 图6

  1. <table class="table table-bordered">
  2.   <thead>
  3.     <tr>
  4.       <th scope="col">#</th>
  5.       <th scope="col">First</th>
  6.       <th scope="col">Last</th>
  7.       <th scope="col">Handle</th>
  8.     </tr>
  9.   </thead>
  10.   <tbody>
  11.     <tr>
  12.       <th scope="row">1</th>
  13.       <td>Mark</td>
  14.       <td>Otto</td>
  15.       <td>@mdo</td>
  16.     </tr>
  17.     <tr>
  18.       <th scope="row">2</th>
  19.       <td>Jacob</td>
  20.       <td>Thornton</td>
  21.       <td>@fat</td>
  22.     </tr>
  23.     <tr>
  24.       <th scope="row">3</th>
  25.       <td colspan="2">Larry the Bird</td>
  26.       <td>@twitter</td>
  27.     </tr>
  28.   </tbody>
  29. </table>

表格 - 图7

  1. <table class="table table-bordered table-dark">
  2.   <thead>
  3.     <tr>
  4.       <th scope="col">#</th>
  5.       <th scope="col">First</th>
  6.       <th scope="col">Last</th>
  7.       <th scope="col">Handle</th>
  8.     </tr>
  9.   </thead>
  10.   <tbody>
  11.     <tr>
  12.       <th scope="row">1</th>
  13.       <td>Mark</td>
  14.       <td>Otto</td>
  15.       <td>@mdo</td>
  16.     </tr>
  17.     <tr>
  18.       <th scope="row">2</th>
  19.       <td>Jacob</td>
  20.       <td>Thornton</td>
  21.       <td>@fat</td>
  22.     </tr>
  23.     <tr>
  24.       <th scope="row">3</th>
  25.       <td colspan="2">Larry the Bird</td>
  26.       <td>@twitter</td>
  27.     </tr>
  28.   </tbody>
  29. </table>

无边框

添加.table-borderless无边界表格

表格 - 图8

  1. <table class="table table-borderless">
  2.   <thead>
  3.     <tr>
  4.       <th scope="col">#</th>
  5.       <th scope="col">First</th>
  6.       <th scope="col">Last</th>
  7.       <th scope="col">Handle</th>
  8.     </tr>
  9.   </thead>
  10.   <tbody>
  11.     <tr>
  12.       <th scope="row">1</th>
  13.       <td>Mark</td>
  14.       <td>Otto</td>
  15.       <td>@mdo</td>
  16.     </tr>
  17.     <tr>
  18.       <th scope="row">2</th>
  19.       <td>Jacob</td>
  20.       <td>Thornton</td>
  21.       <td>@fat</td>
  22.     </tr>
  23.     <tr>
  24.       <th scope="row">3</th>
  25.       <td colspan="2">Larry the Bird</td>
  26.       <td>@twitter</td>
  27.     </tr>
  28.   </tbody>
  29. </table>

.table-borderless 也可以用在黑色表格上.

表格 - 图9

  1. <table class="table table-borderless table-dark">
  2.   <thead>
  3.     <tr>
  4.       <th scope="col">#</th>
  5.       <th scope="col">First</th>
  6.       <th scope="col">Last</th>
  7.       <th scope="col">Handle</th>
  8.     </tr>
  9.   </thead>
  10.   <tbody>
  11.     <tr>
  12.       <th scope="row">1</th>
  13.       <td>Mark</td>
  14.       <td>Otto</td>
  15.       <td>@mdo</td>
  16.     </tr>
  17.     <tr>
  18.       <th scope="row">2</th>
  19.       <td>Jacob</td>
  20.       <td>Thornton</td>
  21.       <td>@fat</td>
  22.     </tr>
  23.     <tr>
  24.       <th scope="row">3</th>
  25.       <td colspan="2">Larry the Bird</td>
  26.       <td>@twitter</td>
  27.     </tr>
  28.   </tbody>
  29. </table>

行悬停效果

将 .table-hover 定义到 <tbody>上，可以产生行悬停效果（鼠标移到行上会出现状态提示）。

表格 - 图10

  1. <table class="table table-hover">
  2.   <thead>
  3.     <tr>
  4.       <th scope="col">#</th>
  5.       <th scope="col">First Name</th>
  6.       <th scope="col">Last Name</th>
  7.       <th scope="col">Username</th>
  8.     </tr>
  9.   </thead>
  10.   <tbody>
  11.     <tr>
  12.       <th scope="row">1</th>
  13.       <td>Mark</td>
  14.       <td>Otto</td>
  15.       <td>@mdo</td>
  16.     </tr>
  17.     <tr>
  18.       <th scope="row">2</th>
  19.       <td>Jacob</td>
  20.       <td>Thornton</td>
  21.       <td>@fat</td>
  22.     </tr>
  23.     <tr>
  24.       <th scope="row">3</th>
  25.       <td colspan="2">Larry the Bird</td>
  26.       <td>@twitter</td>
  27.     </tr>
  28.   </tbody>
  29. </table>

表格 - 图11

  1. <table class="table table-hover table-dark">
  2.   <thead>
  3.     <tr>
  4.       <th scope="col">#</th>
  5.       <th scope="col">First Name</th>
  6.       <th scope="col">Last Name</th>
  7.       <th scope="col">Username</th>
  8.     </tr>
  9.   </thead>
  10.   <tbody>
  11.     <tr>
  12.       <th scope="row">1</th>
  13.       <td>Mark</td>
  14.       <td>Otto</td>
  15.       <td>@mdo</td>
  16.     </tr>
  17.     <tr>
  18.       <th scope="row">2</th>
  19.       <td>Jacob</td>
  20.       <td>Thornton</td>
  21.       <td>@fat</td>
  22.     </tr>
  23.     <tr>
  24.       <th scope="row">3</th>
  25.       <td colspan="2">Larry the Bird</td>
  26.       <td>@twitter</td>
  27.     </tr>
  28.   </tbody>
  29. </table>

紧缩表格

添加 .table-sm 可以将表格的padding值缩减一半，使表格更加紧凑。

表格 - 图12

  1. <table class="table table-sm">
  2.   <thead>
  3.     <tr>
  4.       <th scope="col">#</th>
  5.       <th scope="col">First Name</th>
  6.       <th scope="col">Last Name</th>
  7.       <th scope="col">Username</th>
  8.     </tr>
  9.   </thead>
  10.   <tbody>
  11.     <tr>
  12.       <th scope="row">1</th>
  13.       <td>Mark</td>
  14.       <td>Otto</td>
  15.       <td>@mdo</td>
  16.     </tr>
  17.     <tr>
  18.       <th scope="row">2</th>
  19.       <td>Jacob</td>
  20.       <td>Thornton</td>
  21.       <td>@fat</td>
  22.     </tr>
  23.     <tr>
  24.       <th scope="row">3</th>
  25.       <td colspan="2">Larry the Bird</td>
  26.       <td>@twitter</td>
  27.     </tr>
  28.   </tbody>
  29. </table>

表格 - 图13

  1. <table class="table table-sm table-dark">
  2.   <thead>
  3.     <tr>
  4.       <th scope="col">#</th>
  5.       <th scope="col">First Name</th>
  6.       <th scope="col">Last Name</th>
  7.       <th scope="col">Username</th>
  8.     </tr>
  9.   </thead>
  10.   <tbody>
  11.     <tr>
  12.       <th scope="row">1</th>
  13.       <td>Mark</td>
  14.       <td>Otto</td>
  15.       <td>@mdo</td>
  16.     </tr>
  17.     <tr>
  18.       <th scope="row">2</th>
  19.       <td>Jacob</td>
  20.       <td>Thornton</td>
  21.       <td>@fat</td>
  22.     </tr>
  23.     <tr>
  24.       <th scope="row">3</th>
  25.       <td colspan="2">Larry the Bird</td>
  26.       <td>@twitter</td>
  27.     </tr>
  28.   </tbody>
  29. </table>

语义状态化

使用语义状态样式对表格逐行或单个单元格进行着色表达。

表格 - 图14

  1. <!-- On rows -->
  2. <tr class="table-active">...</tr>
  4. <tr class="table-primary">...</tr>
  5. <tr class="table-secondary">...</tr>
  6. <tr class="table-success">...</tr>
  7. <tr class="table-danger">...</tr>
  8. <tr class="table-warning">...</tr>
  9. <tr class="table-info">...</tr>
  10. <tr class="table-light">...</tr>
  11. <tr class="table-dark">...</tr>
  13. <!-- On cells (`td` or `th`) -->
  14. <tr>
  15.   <td class="table-active">...</td>
  17.   <td class="table-primary">...</td>
  18.   <td class="table-secondary">...</td>
  19.   <td class="table-success">...</td>
  20.   <td class="table-danger">...</td>
  21.   <td class="table-warning">...</td>
  22.   <td class="table-info">...</td>
  23.   <td class="table-light">...</td>
  24.   <td class="table-dark">...</td>
  25. </tr>

深色表格上没有固定的背景，你可以使用 文字或背景通用样式 获得类似的样式：

表格 - 图15

  1. <!-- On rows -->
  2. <tr class="bg-primary">...</tr>
  3. <tr class="bg-success">...</tr>
  4. <tr class="bg-warning">...</tr>
  5. <tr class="bg-danger">...</tr>
  6. <tr class="bg-info">...</tr>
  8. <!-- On cells (`td` or `th`) -->
  9. <tr>
  11.   <td class="bg-primary">...</td>
  12.   <td class="bg-success">...</td>
  13.   <td class="bg-warning">...</td>
  14.   <td class="bg-danger">...</td>
  15.   <td class="bg-info">...</td>
  16. </tr>

向使用辅助技术的用户传达用意

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

通过包装任何响应创建表.table用.table-responsive{-sm|-md|-lg|-xl}，使表滚动水平在每一个max-width的断点分别高达576px，768px，992px和1120px，（但不包括）。

请注意，由于浏览器目前不支持范围方面的查询，我们解决的局限性min-和max-前缀和视口带小数的宽度（可下的高DPI设备一定的条件下发生，例如）通过使用值与这些比较高的精度。

Captions表格辅助标题

<caption> 标签如同一个表格的标题，它默认是隐藏的，可以协助屏幕阅读器用户找到表格、了解表格内容，且决定是否需要阅读它。

表格 - 图16

  1. <table class="table">
  2.   <caption>List of users</caption>
  3.   <thead>
  4.     <tr>
  5.       <th scope="col">#</th>
  6.       <th scope="col">First Name</th>
  7.       <th scope="col">Last Name</th>
  8.       <th scope="col">Username</th>
  9.     </tr>
  10.   </thead>
  11.   <tbody>
  12.     <tr>
  13.       <th scope="row">1</th>
  14.       <td>Mark</td>
  15.       <td>Otto</td>
  16.       <td>@mdo</td>
  17.     </tr>
  18.     <tr>
  19.       <th scope="row">2</th>
  20.       <td>Jacob</td>
  21.       <td>Thornton</td>
  22.       <td>@fat</td>
  23.     </tr>
  24.     <tr>
  25.       <th scope="row">3</th>
  26.       <td>Larry</td>
  27.       <td>the Bird</td>
  28.       <td>@twitter</td>
  29.     </tr>
  30.   </tbody>
  31. </table>

响应式表格

当表格想要始终呈现水平滚动，可在.table上加入.table-responsive获得响应式表现，从而支持任何viewport窗口。也可以在.table上，加 .table-responsive{-sm|-md|-lg|-xl}属性来定义多屏幕尺寸响应支持。

垂直剪裁/缩减

当响应式表格超过表格底部或顶部边缘，会通过 overflow-y: hidden属性将内容隐藏，总的说这会隐藏掉下拉列表或第三方的插件展现。

总是响应

为兼容各个屏幕规格断点，添加 .table-responsive 选择器使表格支持水平响应。

表格 - 图17

  1. <div class="table-responsive">
  2.   <table class="table">
  3.     ...
  4.   </table>
  5. </div>

多屏幕断点设定

使用 .table-responsive{-sm|-md|-lg|-xl}可以根据需要对不同屏幕尺寸断点表格进行响应式设计，在中断点之上该表格会正常显示，而不是水平滚动（没有水平条）。

在响应样式应用于特定视口宽度之前，这些表可能会断开.

表格 - 图18

  1. <div class="table-responsive-sm">
  2.   <table class="table">
  3.     ...
  4.   </table>
  5. </div>

表格 - 图19

  1. <div class="table-responsive-md">
  2.   <table class="table">
  3.     ...
  4.   </table>
  5. </div>

表格 - 图20

  1. <div class="table-responsive-lg">
  2.   <table class="table">
  3.     ...
  4.   </table>
  5. </div>

表格 - 图21

  1. <div class="table-responsive-xl">
  2.   <table class="table">
  3.     ...
  4.   </table>
  5. </div>