Bootstrap 5 表格完全指南
编程小白也能理解的表格知识汇总
📝 学前必读
Bootstrap 表格是基于HTML的 <table> 元素构建的，只需要添加一些CSS类就能实现各种专业效果。
不需要手动写复杂的CSS样式，Bootstrap已经帮你准备好了一切！
基础表格
最简单的表格形式，只需添加 .table 类到 <table> 标签。
| 姓名 | 年龄 | 城市 |
|---|---|---|
| 张三 | 28 | 北京 |
| 李四 | 32 | 上海 |
<table class=“table”>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>28</td>
<td>北京</td>
</tr>
…
</tbody>
</table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>28</td>
<td>北京</td>
</tr>
…
</tbody>
</table>
样式表格
Bootstrap提供了多种预定义样式，只需在 .table 后添加相应类：
添加 .table-striped 类实现”斑马纹”效果（隔行变色）：
| 名称 | 价格 | 库存 |
|---|---|---|
| 手机 | ¥3,299 | 56 |
| 平板 | ¥2,199 | 32 |
| 笔记本 | ¥5,999 | 18 |
<table class=“table table-striped”>
添加 .table-bordered 类给表格添加边框：
| 项目 | 完成度 | 状态 |
|---|---|---|
| 设计稿 | 100% | 已完成 |
| 前端开发 | 85% | 进行中 |
<table class=“table table-bordered”>
添加 .table-hover 类实现鼠标悬停效果：
| 产品 | 类别 | 评分 |
|---|---|---|
| 相机 A7 | 电子产品 | 4.8 |
| 耳机 Pro | 音频设备 | 4.6 |
<table class=“table table-hover”>
组合使用： 这些样式类可以同时使用，例如：
<table class=“table table-striped table-bordered table-hover”>
响应式表格
在小屏幕上（如手机），宽表格会变得难以阅读。使用响应式表格可以让表格在小屏幕上水平滚动。
只需在表格外部添加一个 .table-responsive 的div：
| ID | 姓名 | 职位 | 部门 | 入职日期 | 邮箱 | 电话 |
|---|---|---|---|---|---|---|
| 101 | 王小明 | 前端开发 | 技术部 | 2022-03-15 | wang@example.com | 13800138000 |
<div class=“table-responsive”>
<table class=“table”>
<!– 表格内容 –>
</table>
</div>
<table class=“table”>
<!– 表格内容 –>
</table>
</div>
响应式断点： 可以根据不同屏幕尺寸设置响应式：
- .table-responsive-sm – 在≥576px宽的屏幕上不滚动
- .table-responsive-md – 在≥768px宽的屏幕上不滚动
- .table-responsive-lg – 在≥992px宽的屏幕上不滚动
- .table-responsive-xl – 在≥1200px宽的屏幕上不滚动
- .table-responsive-xxl – 在≥1400px宽的屏幕上不滚动
彩色表格
Bootstrap提供了一系列颜色类，可以给表格行、单元格添加颜色：
| 类名 | 效果 | 使用示例 |
|---|---|---|
| .table-primary | 蓝色（主要） | <tr class=”table-primary”> |
| .table-success | 绿色（成功） | <tr class=”table-success”> |
| .table-danger | 红色（危险） | <tr class=”table-danger”> |
| .table-warning | 黄色（警告） | <tr class=”table-warning”> |
| .table-info | 青色（信息） | <tr class=”table-info”> |
使用技巧：
- 可以应用在 <tr>、<th> 或 <td> 上
- 表头颜色使用 .table-dark 或 .table-light
- 示例：
<tr class="table-success">
表格尺寸
调整表格尺寸，让表格更紧凑或更宽松：
更小的表格
添加 .table-sm 类
| ID | 名称 | 价格 |
|---|---|---|
| 001 | 商品A | ¥199 |
| 002 | 商品B | ¥299 |
<table class=“table table-sm”>
紧凑边框
添加 .table-borderless 去除所有边框
| ID | 名称 | 价格 |
|---|---|---|
| 001 | 商品A | ¥199 |
| 002 | 商品B | ¥299 |
<table class=“table table-borderless”>
🎯 核心要点总结
- 基础类不可少：所有表格都需要
class="table" - 样式自由组合：
table-striped、table-bordered、table-hover可同时使用 - 移动端适配：宽表格要加
table-responsive容器 - 颜色表意：使用颜色类增强表格可读性
- 尺寸控制：
table-sm让表格更紧凑