Bootstrap 表格类详解：基础、样式与响应式布局
本文详细介绍 Bootstrap 提供的表格布局类，包括基础 .table 类及 .table-striped、.table-bordered、.table-hover、.table-condensed 等可选样式类。同时讲解上下文类用于改变行或单元格背景色，以及通过 .table-responsive 实现小于 768px 设备的水平滚动响应式效果。
Bootstrap 表格基础与类概览
Bootstrap 框架提供了结构清晰的表格布局方案。以下列举了 Bootstrap 支持的主要表格元素类型：
表格基础类 以下样式类可直接应用于表格元素：
<tr>、<th> 和 <td> 类 以下类可分别应用于表格的行或单元格：
基础表格样式实现
基础表格样式 若需创建仅包含内边距（padding）和水平分割线的简洁表格，只需添加 .table 类，参考如下示例：
<div class="row">
<table class="table">
<caption class="text-center">基本表格布局</caption>
<thead>
<tr>
<th>编号</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>No.1</td>
<td>北京</td>
</tr>
<tr>
<td>No.2</td>
<td>上海</td>
</tr>
</tbody>
</table>
</div>
页面显示效果：
可选表格样式类详解
可选表格样式类 除了基础表格标记和 .table 类外，Bootstrap 还提供了一系列用于定义特定样式的类。下文将逐一介绍这些类的使用方法。
条纹表格 通过添加 .table-striped 类，可在 <tbody> 内的各行之间显示条纹背景，具体示例如下：
<div class="row">
<table class="table table-striped">
<caption class="text-center">条纹表格布局</caption>
<thead>
<tr>
<th>编号</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>No.1</td>
<td>北京</td>
</tr>
<tr>
<td>No.2</td>
<td>上海</td>
</tr>
<tr>
<td>No.3</td>
<td>苏州</td>
</tr>
<tr>
<td>No.4</td>
<td>南京</td>
</tr>
</tbody>
</table>
</div>
页面显示效果：
边框表格 通过添加 .table-bordered 类，可为每个元素添加边框，并使整个表格呈现圆角效果，具体示例如下：
<div class="row">
<table class="table table-bordered">
<caption class="text-center">边框表格布局</caption>
<thead>
<tr>
<th>编号</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>No.1</td>
<td>北京</td>
</tr>
<tr>
<td>No.2</td>
<td>上海</td>
</tr>
<tr>
<td>No.3</td>
<td>苏州</td>
</tr>
<tr>
<td>No.4</td>
<td>南京</td>
</tr>
</tbody>
</table>
</div>
页面显示效果：
悬停表格 通过添加 .table-hover 类，当鼠标指针悬停在某一行上时，该行背景会变为浅灰色，具体示例如下：
<div class="row">
<table class="table table-hover">
<caption class="text-center">悬停表格布局</caption>
<thead>
<tr>
<th>编号</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>No.1</td>
<td>北京</td>
</tr>
<tr>
<td>No.2</td>
<td>上海</td>
</tr>
<tr>
<td>No.3</td>
<td>苏州</td>
</tr>
<tr>
<td>No.4</td>
<td>南京</td>
</tr>
</tbody>
</table>
</div>
页面显示效果：
紧凑表格 通过添加 .table-condensed 类，可将行内边距（padding）缩减为原来的一半，从而使表格外观更加紧凑。这在需要展示大量密集信息时非常实用。
<div class="row">
<table class="table table-condensed">
<caption class="text-center">精简表格布局</caption>
<thead>
<tr>
<th>编号</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>No.1</td>
<td>北京</td>
</tr>
<tr>
<td>No.2</td>
<td>上海</td>
</tr>
<tr>
<td>No.3</td>
<td>苏州</td>
</tr>
<tr>
<td>No.4</td>
<td>南京</td>
</tr>
</tbody>
</table>
</div>
页面显示效果：
上下文类与响应式布局
上下文类 下表列出的上下文类允许您修改表格行或单个单元格的背景颜色。
这些类可应用于 <tr>、<td> 或 <th> 元素，具体示例如下：
<div class="row">
<table class="table">
<caption class="text-center">上下文表格布局</caption>
<thead>
<tr>
<th>编号</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>No.1</td>
<td>北京</td>
</tr>
<tr class="success">
<td>No.2</td>
<td>上海</td>
</tr>
<tr class="warning">
<td>No.3</td>
<td>苏州</td>
</tr>
<tr class="danger">
<td>No.4</td>
<td>南京</td>
</tr>
</tbody>
</table>
</div>
页面显示效果：
响应式表格 将任意 .table 包裹在 .table-responsive 类内部，即可实现响应式布局。当屏幕宽度小于 768px 时，表格支持水平滚动以适应小型设备；在宽度大于 768px 的大型设备上查看时，则无此差异。
<div class="table-responsive">
<table class="table">
<caption class="text-center">响应式表格布局</caption>
<thead>
<tr>
<th>编号</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>No.1</td>
<td>北京</td>
</tr>
<tr>
<td>No.2</td>
<td>上海</td>
</tr>
<tr>
<td>No.3</td>
<td>苏州</td>
</tr>
<tr>
<td>No.4</td>
<td>南京</td>
</tr>
</tbody>
</table>
</div>
页面显示效果：
如需进一步深入学习，可点击此处继续学习，并参考以下精彩专题：Bootstrap 学习教程。
以上内容即为本文全部介绍，旨在帮助大家更好地掌握 Bootstrap 表格组件的使用技巧。
怎么在 Vue 或 React 项目中正确集成 animate.js
2026-11-05 10:23:38
JS注册事件：addEventListener基础语法与参数详解
2026-11-05 08:44:56
JSP和JS的区别：运行环境与服务端/客户端职责解析
2026-11-04 23:34:36
pdf.js 官方下载地址：GitHub Release 获取预编译包
2026-11-04 23:07:27
前端学习路径：为什么建议先掌握HTML再学习JavaScript？
2026-11-04 18:56:08