Bootstrap5 表格修饰类 (table classes)

Bootstrap 5 内置了很多表格修饰类 (table classes)，可以直接加在 <table> 标签上，让表格外观更美观。

1、基础表格类
<table class=”table”>
</table>

2、常用修饰类
1）. 条纹行
<table class=”table table-striped”>
</table>

2）. 带边框
<table class=”table table-bordered”>
</table>

3）. 紧凑表格
<table class=”table table-sm”>
</table>

4）. 深色表格
<table class=”table table-dark”>
</table>

5）. Hover 效果
<table class=”table table-hover”>
</table>

3、颜色修饰（按行或单元格）

Bootstrap 内置了背景色类，可以用在 <tr> 或 <td>：

table-primary (蓝色)

table-secondary (灰色)

table-success (绿色)

table-danger (红色)

table-warning (黄色)

table-info (青色)

table-light (浅灰)

table-dark (深灰)

用法：

4. 表格行高（row height）

Bootstrap 默认通过 line-height 和 padding 控制表格行高：

.table 默认行高 = 由内容撑开

.table-sm → 紧凑模式（padding 更小，高度更低）

例子：

2. 垂直对齐（vertical alignment）

用 align-* 类来控制单元格内部内容的垂直位置：

align-top

align-middle （常用）

align-bottom

例子：

相关文章