由于在<table>日历和日期选择器等第三方小部件中广泛使用元素,Bootstrap 的表格是可选的。将基类添加.table到 any <table>,然后使用我们的可选修饰符类或自定义样式进行扩展。Bootstrap 中不会继承所有表格样式,这意味着任何嵌套表格都可以独立于父表格进行样式设置。
使用最基本的表格标记,这是.table基于 - 的表格在 Bootstrap 中的外观。
#
第一的
最后的
处理
1
标记
奥托
@mdo
2
雅各布
桑顿
@胖的
3
拉里小鸟
@推特
<tableclass="table"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table>
变体
使用上下文类为表格、表格行或单个单元格着色。
班级
标题
标题
默认
细胞
细胞
基本的
细胞
细胞
中学
细胞
细胞
成功
细胞
细胞
危险
细胞
细胞
警告
细胞
细胞
信息
细胞
细胞
光
细胞
细胞
黑暗的
细胞
细胞
<!-- On tables --><tableclass="table-primary">...</table><tableclass="table-secondary">...</table><tableclass="table-success">...</table><tableclass="table-danger">...</table><tableclass="table-warning">...</table><tableclass="table-info">...</table><tableclass="table-light">...</table><tableclass="table-dark">...</table><!-- On rows --><trclass="table-primary">...</tr><trclass="table-secondary">...</tr><trclass="table-success">...</tr><trclass="table-danger">...</tr><trclass="table-warning">...</tr><trclass="table-info">...</tr><trclass="table-light">...</tr><trclass="table-dark">...</tr><!-- On cells (`td` or `th`) --><tr><tdclass="table-primary">...</td><tdclass="table-secondary">...</td><tdclass="table-success">...</td><tdclass="table-danger">...</td><tdclass="table-warning">...</td><tdclass="table-info">...</td><tdclass="table-light">...</td><tdclass="table-dark">...</td></tr>
<divclass="table-responsive"><tableclass="table align-middle"><thead><tr>
...
</tr></thead><tbody><tr>
...
</tr><trclass="align-bottom">
...
</tr><tr><td>...</td><td>...</td><tdclass="align-top">This cell is aligned to the top.</td><td>...</td></tr></tbody></table></div>
A 的<caption>功能类似于表格的标题。它可以帮助使用屏幕阅读器的用户找到一个表格并了解它的内容并决定他们是否要阅读它。
用户列表
#
第一的
最后的
处理
1
标记
奥托
@mdo
2
雅各布
桑顿
@胖的
3
拉里小鸟
@推特
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
您也可以使用 将 放在<caption>桌子的顶部.caption-top。
用户列表
#
第一的
最后的
处理
1
标记
奥托
@mdo
2
雅各布
桑顿
@胖的
3
拉里
鸟
@推特
<tableclass="table caption-top"><caption>List of users</caption><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><td>Larry</td><td>the Bird</td><td>@twitter</td></tr></tbody></table>
响应式表
响应式表格允许表格轻松水平滚动。通过将 a 包裹起来,使任何表格在所有视口中都具有响应.table性.table-responsive。或者,选择一个最大断点,通过使用.table-responsive{-sm|-md|-lg|-xl|-xxl}.