在数据密集的Web应用中，表格是展示结构化信息最常用的方式之一。Bootstrap提供了一套功能丰富、样式精美的表格组件，让开发者无需编写复杂CSS就能创建出专业水准的数据表格。
Bootstrap表格
Bootstrap表格是基于CSS样式预定义的表格组件，通过添加特定的类名，可以快速实现条纹行、悬停效果、边框、紧凑布局等多种表格样式。它继承了Bootstrap的响应式特性，能够在不同设备上保持良好的可读性。
基础表格结构
Bootstrap表格的基本结构与传统HTML表格相同，但需要添加.table基类：
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">姓名</th>
<th scope="col">部门</th>
<th scope="col">职位</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>张三</td>
<td>技术部</td>
<td>前端工程师</td>
</tr>
<tr>
<th scope="row">2</th>
<td>李四</td>
<td>设计部</td>
<td>UI设计师</td>
</tr>
</tbody>
</table>
表格样式变体
Bootstrap提供了多种表格样式类来满足不同场景需求：
| 类名 | 描述 |
|---|---|
.table-striped | 斑马条纹表格 |
.table-bordered | 带边框表格 |
.table-borderless | 无边框表格 |
.table-hover | 行悬停效果 |
.table-sm | 紧凑型表格 |
.table-dark | 深色主题表格 |
完整代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap表格示例</title>
<!-- 引入Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.demo-section {
margin-bottom: 3rem;
}
.demo-section h3 {
margin-bottom: 1rem;
color: #495057;
border-left: 4px solid #0d6efd;
padding-left: 10px;
}
</style>
</head>
<body>
<div class="container my-5">
<h1 class="text-center mb-4">Bootstrap表格样式展示</h1>
<!-- 基础表格 -->
<div class="demo-section">
<h3>基础表格</h3>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">姓名</th>
<th scope="col">部门</th>
<th scope="col">职位</th>
<th scope="col">入职时间</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>张三</td>
<td>技术部</td>
<td>前端工程师</td>
<td>2022-03-15</td>
</tr>
<tr>
<th scope="row">2</th>
<td>李四</td>
<td>设计部</td>
<td>UI设计师</td>
<td>2021-08-22</td>
</tr>
<tr>
<th scope="row">3</th>
<td>王五</td>
<td>市场部</td>
<td>市场专员</td>
<td>2023-01-10</td>
</tr>
</tbody>
</table>
</div>
<!-- 斑马条纹表格 -->
<div class="demo-section">
<h3>斑马条纹表格</h3>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">产品名称</th>
<th scope="col">类别</th>
<th scope="col">价格</th>
<th scope="col">库存</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>笔记本电脑</td>
<td>电子产品</td>
<td>¥5,999</td>
<td>23</td>
</tr>
<tr>
<th scope="row">2</th>
<td>无线鼠标</td>
<td>电脑配件</td>
<td>¥129</td>
<td>156</td>
</tr>
<tr>
<th scope="row">3</th>
<td>机械键盘</td>
<td>电脑配件</td>
<td>¥399</td>
<td>42</td>
</tr>
</tbody>
</table>
</div>
<!-- 带边框和悬停效果的表格 -->
<div class="demo-section">
<h3>带边框和悬停效果的表格</h3>
<table class="table table-bordered table-hover">
<thead class="table-light">
<tr>
<th scope="col">课程编号</th>
<th scope="col">课程名称</th>
<th scope="col">教师</th>
<th scope="col">学分</th>
<th scope="col">选课人数</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">CS101</th>
<td>计算机基础</td>
<td>张教授</td>
<td>3</td>
<td>120</td>
</tr>
<tr>
<th scope="row">MA202</th>
<td>高等数学</td>
<td>李教授</td>
<td>4</td>
<td>95</td>
</tr>
<tr>
<th scope="row">EN305</th>
<td>专业英语</td>
<td>王老师</td>
<td>2</td>
<td>78</td>
</tr>
</tbody>
</table>
</div>
<!-- 紧凑型表格 -->
<div class="demo-section">
<h3>紧凑型表格</h3>
<table class="table table-sm">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">任务名称</th>
<th scope="col">负责人</th>
<th scope="col">状态</th>
<th scope="col">截止日期</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">T001</th>
<td>需求分析文档</td>
<td>张三</td>
<td><span class="badge bg-success">已完成</span></td>
<td>2024-01-15</td>
</tr>
<tr>
<th scope="row">T002</th>
<td>UI设计稿</td>
<td>李四</td>
<td><span class="badge bg-warning">进行中</span></td>
<td>2024-02-10</td>
</tr>
<tr>
<th scope="row">T003</th>
<td>前端开发</td>
<td>王五</td>
<td><span class="badge bg-secondary">待开始</span></td>
<td>2024-03-01</td>
</tr>
</tbody>
</table>
</div>
<!-- 深色表格 -->
<div class="demo-section">
<h3>深色主题表格</h3>
<table class="table table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">电影名称</th>
<th scope="col">类型</th>
<th scope="col">评分</th>
<th scope="col">上映年份</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>肖申克的救赎</td>
<td>剧情</td>
<td>9.7</td>
<td>1994</td>
</tr>
<tr>
<th scope="row">2</th>
<td>阿甘正传</td>
<td>剧情/爱情</td>
<td>9.5</td>
<td>1994</td>
</tr>
<tr>
<th scope="row">3</th>
<td>这个杀手不太冷</td>
<td>剧情/动作</td>
<td>9.4</td>
<td>1994</td>
</tr>
</tbody>
</table>
</div>
<!-- 彩色表头表格 -->
<div class="demo-section">
<h3>彩色表头表格</h3>
<table class="table">
<thead class="table-primary">
<tr>
<th scope="col">月份</th>
<th scope="col">销售额</th>
<th scope="col">同比增长</th>
<th scope="col">完成率</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">一月</th>
<td>¥125,000</td>
<td class="text-success">+15%</td>
<td>105%</td>
</tr>
<tr>
<th scope="row">二月</th>
<td>¥118,000</td>
<td class="text-success">+8%</td>
<td>98%</td>
</tr>
<tr>
<th scope="row">三月</th>
<td>¥142,000</td>
<td class="text-success">+22%</td>
<td>118%</td>
</tr>
</tbody>
</table>
</div>
<!-- 响应式表格 -->
<div class="demo-section">
<h3>响应式表格（在小屏幕上水平滚动）</h3>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">员工ID</th>
<th scope="col">姓名</th>
<th scope="col">职位</th>
<th scope="col">部门</th>
<th scope="col">邮箱</th>
<th scope="col">电话</th>
<th scope="col">入职日期</th>
<th scope="col">薪资等级</th>
<th scope="col">绩效评分</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">E1001</th>
<td>张三</td>
<td>高级工程师</td>
<td>技术部</td>
<td>zhangsan@company.com</td>
<td>13800138000</td>
<td>2020-05-20</td>
<td>P7</td>
<td>A</td>
</tr>
<tr>
<th scope="row">E1002</th>
<td>李四</td>
<td>产品经理</td>
<td>产品部</td>
<td>lisi@company.com</td>
<td>13900139000</td>
<td>2019-08-15</td>
<td>P8</td>
<td>A+</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- 引入Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
运行结果如下：
总结：
- 基础类必备 ：所有表格都必须加上
.table基类 - 样式可组合 ：可以叠加
.table-striped、.table-hover、.table-bordered等多个样式类 - 响应式包装：宽表格用
.table-responsive实现水平滚动
