Table 表格

用于展示多条结构类似的数据

基础用法

添加.table 类来添加基本的表格样式。使用 thead 和 tbody 来包裹表格的头部和主体内容。使用 th 和 td 来定义表头和表体单元格。

使用table-* 类来添加不同的背景颜色。

使用 .table-striped 将斑马条纹添加到 tbody 内的任何表格行

使用 .table-striped-columns 将斑马条纹添加到任何表格列。

添加 .table-hover 以在 <tbody> 内的表行上启用悬停状态。

通过添加 .table-active 类高亮表格行或单元格。

添加 .table-bordered 作为表格和单元格所有侧面的边框。

通过 .justify-content-center 来居中对齐分页。

为无边框的表格添加 .table-borderless。

通过将所有单元 padding 切成两半，添加 .table-sm 以使任何 .table 更加紧凑。

<thead> 的表格单元格始终与底部垂直对齐。<tbody> 中的表格单元格继承了 <table> 的对齐方式，并且默认情况下与顶部对齐。

嵌套表格不会继承边框样式、活动样式和表格变体。

与表格和深色表格类似，使用修饰符类 .table-light 或 .table-dark 使 <thead> 显示为浅灰色或深灰色。

<caption> 的功能类似于表格的标题。它可以帮助使用屏幕阅读器的用户找到表格并了解其内容并决定是否要阅读它。

响应式表格允许表格轻松水平滚动。通过用 .table-responsive 封装 .table，使任何表格都能在所有视口中响应。或者，使用 .table-responsive{-sm|-md|-lg|-xl|-xxl} 选择一个最大断点，使响应表达到最大断点。

在每个断点上，使用 .table-responsive 来水平滚动表。

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

这些表格可能会出现损坏，直到它们的响应样式应用于特定的视口宽度。

table-responsive-sm

table-responsive-md

table-responsive-lg

table-responsive-xl

table-responsive-xxl