Bootstrap 5 表格
基本表格
一个基本的 Bootstrap 5 表格具有轻微的内边距和水平分隔线。
.table 类为表格添加基本样式
斑马条纹行
.table-striped 类为表格添加斑马条纹
带边框的表格
.table-bordered 类为表格和单元格的所有边添加边框
悬停行
.table-hover 类在表格行上添加悬停效果（灰色背景色）
黑/深色表格
.table-dark 类为表格添加黑色背景
深色条纹表格
结合使用 .table-dark 和 .table-striped 可创建深色条纹表格
可悬停的深色表格
.table-hover 类在表格行上添加悬停效果（灰色背景色）
无边框表格
.table-borderless 类可移除表格的边框
Contextual Classes
情境类 可用于为整个表格 (<table>)、表格行 (<tr>) 或表格单元格 (<td>) 着色。
示例
| 默认值 | 默认 | def@somemail.com |
| 主色 | 乔 | joe@example.com |
| 成功 | Doe | john@example.com |
| 危险 | Moe | mary@example.com |
| 信息 | Dooley | july@example.com |
| 警告 | Refs | bo@example.com |
| 激活 | Activeson | act@example.com |
| 次色 | 次子 | sec@example.com |
| Light | 安吉 | angie@example.com |
| Dark | Bo | bo@example.com |
可以使用的上下文类是
| 类 | 描述 |
|---|---|
.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 |
