文档和示例，选择表%28的样式，考虑到它们在JavaScript插件%29中的优先使用和引导。

实例

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

使用最基本的表标记，下面是.table-以表为基础的表在Bootstrap中查找。所有表样式都是在Bootstrap 4中继承的。，这意味着任何嵌套表都将以与父表相同的方式样式。

<table class="table">  <thead>    <tr>      <th scope="col">#</th>      <th scope="col">First Name</th>      <th scope="col">Last Name</th>      <th scope="col">Username</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...

<table class="table table-dark">  <thead>    <tr>      <th scope="col">#</th>      <th scope="col">First Name</th>      <th scope="col">Last Name</th>      <th scope="col">Username</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看上去是浅灰色还是深灰色。

<table class="table">  <thead class="thead-dark">    <tr>      <th scope="col">#</th>      <th scope="col">First Name</th>      <th scope="col">Last Name</th>      <th scope="col">Username</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 Name</th>      <th scope="col">Last Name</th>      <th scope="col">Username</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>...

<table class="table table-striped">  <thead>    <tr>      <th scope="col">#</th>      <th scope="col">First Name</th>      <th scope="col">Last Name</th>      <th scope="col">Username</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 table-striped table-dark">  <thead>    <tr>      <th scope="col">#</th>      <th scope="col">First Name</th>      <th scope="col">Last Name</th>      <th scope="col">Username</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用于表格和单元格的所有边框。

<table class="table table-bordered">  <thead>    <tr>      <th scope="col">#</th>      <th scope="col">First Name</th>      <th scope="col">Last Name</th>      <th scope="col">Username</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>Mark</td>      <td>Otto</td>      <td>@TwBootstrap</td>    </tr>    <tr>      <th scope="row">3</th>      <td>Jacob</td>      <td>Thornton</td>      <td>@fat</td>    </tr>    <tr>      <th scope="row">4</th>      <td colspan="2">Larry the Bird</td>      <td>@twitter</td>    </tr>  </tbody></table>

<table class="table table-bordered table-dark">  <thead>    <tr>      <th scope="col">#</th>      <th scope="col">First Name</th>      <th scope="col">Last Name</th>      <th scope="col">Username</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>Mark</td>      <td>Otto</td>      <td>@TwBootstrap</td>    </tr>    <tr>      <th scope="row">3</th>      <td>Jacob</td>      <td>Thornton</td>      <td>@fat</td>    </tr>    <tr>      <th scope="row">4</th>      <td colspan="2">Larry the Bird</td>      <td>@twitter</td>    </tr>  </tbody></table>

半覆盖行

加.table-hover对象中的表行上启用悬停状态。<tbody>...

<table class="table table-hover">  <thead>    <tr>      <th scope="col">#</th>      <th scope="col">First Name</th>      <th scope="col">Last Name</th>      <th scope="col">Username</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 class="table table-hover table-dark">  <thead>    <tr>      <th scope="col">#</th>      <th scope="col">First Name</th>      <th scope="col">Last Name</th>      <th scope="col">Username</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为了使桌子更紧凑，将细胞垫切成两半。

<table class="table table-sm">  <thead>    <tr>      <th scope="col">#</th>      <th scope="col">First Name</th>      <th scope="col">Last Name</th>      <th scope="col">Username</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 class="table table-sm table-dark">  <thead>    <tr>      <th scope="col">#</th>      <th scope="col">First Name</th>      <th scope="col">Last Name</th>      <th scope="col">Username</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>

普通表背景变体在暗表中不可用，但是可以使用文本或背景实用程序以达到类似的风格。

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

向辅助技术传达意义

使用颜色来增加意义只会提供一个视觉指示，不会传达给辅助技术的用户，比如屏幕阅读器。确保颜色所表示的信息从内容本身中明显可见。可见文本%29，或通过其他方法包括，例如隐藏在.sr-only上课。

说明

阿<caption>函数就像表的标题。它帮助屏幕阅读器的用户找到一个表格，了解它的内容，并决定是否要阅读它。

<table class="table">  <caption>List of users</caption>  <thead>    <tr>      <th scope="col">#</th>      <th scope="col">First Name</th>      <th scope="col">Last Name</th>      <th scope="col">Username</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 class="table table-responsive">  ...</table>

断点特定

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

<table class="table table-responsive-sm">  ...</table><table class="table table-responsive-md">  ...</table><table class="table table-responsive-lg">  ...</table><table class="table table-responsive-xl">  ...</table>

 © 2011–2017 Twitter, Inc.

© 2011–2017 The Bootstrap Authors

根据MIT许可授权的代码。

根据CreativeCommonsAttributionLicense v3.0授权的文档。