• 表格
    • 示例
    • Head表头处理
    • 条纹状表格
    • 表格边框处理
    • 无边框
    • 行悬停效果
    • 紧缩表格
    • 语义状态化
      • 向使用辅助技术的用户传达用意
  • Captions表格辅助标题
  • 响应式表格
    • 垂直剪裁/缩减
  • 总是响应
  • 多屏幕断点设定

    表格

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