bootstrap：表格

最新推荐文章于 2025-10-12 09:33:29 发布

原创最新推荐文章于 2025-10-12 09:33:29 发布 · 824 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #html #javascript

bootstrap 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了Bootstrap中用于美化表格的各种类，包括.table、.table-striped、.table-bordered等，以及如何通过这些类实现表格的边框、行颜色变化、响应式布局和不同状态的视觉效果。此外，还提到了表格颜色类，如.active、.success等，用于改变行或单元格的背景颜色，以突出显示特定信息。

bootstrap：表格

bootstrap中的table标签同样默认是没有边框的

类名	添加位置	作用
.table	给table标签添加	作为基类，为其他表格类提供样式(即：每一行上方多了一条水平线，并且表格宽度变为100%)
.table-striped	给table标签添加	隔行换色，单行为浅灰色背景颜色，双行白色背景颜色
.table-bordered	给table标签添加	显示完整的内外边框（即：表格和单元格边框）
.table-hover	给table标签添加	当鼠标移入表格的时候，对应的行的背景颜色变为深灰色
.table-responsive	给table标签的父级元素添加	设置响应式表格（即：表格宽度比屏幕宽时在表格下方出现横向滚动条，这样不用让整个页面滚动）
.table-condensed	给table标签添加	紧缩表格（即：让单元格的padding值减为原来的一半）
表格颜色
.active	给tr或td标签添加	将行或单元格设置为深灰色（和鼠标悬停时一样的颜色）
.success	给tr或td标签添加	将行或单元格设置为淡绿色（表示成功或积极的颜色）
.info	给tr或td标签添加	将行或单元格设置为淡蓝色（表示普通的提示的颜色）
.warning	给tr或td标签添加	将行或单元格设置为淡黄色（表示警告或需要用户注意的颜色）
.danger	给tr或td标签添加	将行或单元格设置为淡红色（表示危险或潜在的负面影响的颜色）