Bootstrap 5 表格
基本表格
一个基本的 Bootstrap 5 表格具有轻微的填充和水平分隔线。
.table 类为表格添加基本样式
条纹行
.table-striped 类为表格添加斑马条纹
带边框的表格
.table-bordered 类在表格和单元格的所有边框上添加边框
悬停行
.table-hover 类在表格行上添加悬停效果（灰色背景色）
黑色/深色表格
.table-dark 类为表格添加黑色背景
深色条纹表格
结合 .table-dark 和 .table-striped 创建一个深色条纹表格
可悬停深色表格
.table-hover 类在表格行上添加悬停效果（灰色背景色）
无边框表格
.table-borderless 类从表格中删除边框
上下文类
上下文类 可用于为整个表格 (<table>)、表格行 (<tr>) 或表格单元格 (<td>) 着色。
示例
| 默认 | Defaultson | [email protected] |
| 主要 | Joe | [email protected] |
| 成功 | Doe | [email protected] |
| 危险 | Moe | [email protected] |
| 信息 | Dooley | [email protected] |
| 警告 | Refs | [email protected] |
| 活动 | Activeson | [email protected] |
| 次要 | Secondson | [email protected] |
| 浅色 | Angie | [email protected] |
| 深色 | Bo | [email protected] |
可用的上下文类有
| 类 | 描述 |
|---|---|
.table-primary |
蓝色：表示重要的操作 |
.table-success |
绿色：表示成功的或积极的操作 |
.table-danger |
红色：表示危险的或可能负面的操作 |
.table-info |
浅蓝色：表示中性的信息性更改或操作 |
.table-warning |
橙色：表示可能需要关注的警告 |
.table-active |
灰色：将悬停颜色应用于表格行或表格单元格 |
.table-secondary |
灰色：表示不太重要的操作 |
.table-light |
浅灰色表格或表格行背景 |
.table-dark |
深灰色表格或表格行背景 |
表格标题颜色
您也可以使用任何上下文类来仅为表格标题添加背景颜色
小型表格
.table-sm 类通过将单元格填充减少一半来使表格更小
响应式表格
.table-responsive 类在需要时（当表格水平方向过大时）为表格添加滚动条
您还可以根据屏幕宽度决定表格何时应获得滚动条
| 类 | 屏幕宽度 |
|---|---|
.table-responsive-sm |
< 576px |
.table-responsive-md |
< 768px |
.table-responsive-lg |
< 992px |
.table-responsive-xl |
< 1200px |
.table-responsive-xxl |
< 1400px |
