表格

使用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>
  31. <table class="table">
  32. <thead class="thead-light">
  33. <tr>
  34. <th scope="col">#</th>
  35. <th scope="col">First Name</th>
  36. <th scope="col">Last Name</th>
  37. <th scope="col">Username</th>
  38. </tr>
  39. </thead>
  40. <tbody>
  41. <tr>
  42. <th scope="row">1</th>
  43. <td>Mark</td>
  44. <td>Otto</td>
  45. <td>@mdo</td>
  46. </tr>
  47. <tr>
  48. <th scope="row">2</th>
  49. <td>Jacob</td>
  50. <td>Thornton</td>
  51. <td>@fat</td>
  52. </tr>
  53. <tr>
  54. <th scope="row">3</th>
  55. <td>Larry</td>
  56. <td>the Bird</td>
  57. <td>@twitter</td>
  58. </tr>
  59. </tbody>
  60. </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>
  3. <tr class="table-primary">...</tr>
  4. <tr class="table-secondary">...</tr>
  5. <tr class="table-success">...</tr>
  6. <tr class="table-danger">...</tr>
  7. <tr class="table-warning">...</tr>
  8. <tr class="table-info">...</tr>
  9. <tr class="table-light">...</tr>
  10. <tr class="table-dark">...</tr>
  11. <!-- On cells (`td` or `th`) -->
  12. <tr>
  13. <td class="table-active">...</td>
  14. <td class="table-primary">...</td>
  15. <td class="table-secondary">...</td>
  16. <td class="table-success">...</td>
  17. <td class="table-danger">...</td>
  18. <td class="table-warning">...</td>
  19. <td class="table-info">...</td>
  20. <td class="table-light">...</td>
  21. <td class="table-dark">...</td>
  22. </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>
  7. <!-- On cells (`td` or `th`) -->
  8. <tr>
  9. <td class="bg-primary">...</td>
  10. <td class="bg-success">...</td>
  11. <td class="bg-warning">...</td>
  12. <td class="bg-danger">...</td>
  13. <td class="bg-info">...</td>
  14. </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>