English 中文 العربية 日本語 Português

Bootstrap: 表格

最后更新：2026-08-26

1. 本课导读

(1) 前置知识

(2) 🎯 你将学到

(3) 痛点

Alice 做了一个用户管理页面，需要展示用户 ID、姓名、邮箱、注册日期和操作按钮——一条数据在 table 中展示比用卡片或列表更直观。

(4) 解法

表格是数据展示的核心方式。Bootstrap 的表格 class 只需在 <table> 上加一个 .table，就能获得一套干净、专业的表格样式。

理解方式： Bootstrap 表格 = 基础的 <table> 升级版——加 .table 获得边距和排版，加 .table-striped 隔行变色，加 .table-hover 行悬停效果。

(5) 收益

借助 Bootstrap 的表格工具类，可以快速创建整洁、专业的数据表格，让数据一目了然。

2. 基础表格

▶ 示例：基础表格

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Table Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h5>Basic Table</h5>
    <table class="table">
      <thead>
        <tr><th>#</th><th>Name</th><th>Email</th><th>Status</th></tr>
      </thead>
      <tbody>
        <tr><td>1</td><td>Alice</td><td>alice@example.com</td><td>Active</td></tr>
        <tr><td>2</td><td>Bob</td><td>bob@example.com</td><td>Active</td></tr>
        <tr><td>3</td><td>Charlie</td><td>charlie@example.com</td><td>Inactive</td></tr>
      </tbody>
    </table>

    <h5>Striped Rows</h5>
    <table class="table table-striped">
      <thead>
        <tr><th>#</th><th>Product</th><th>Price</th><th>Stock</th></tr>
      </thead>
      <tbody>
        <tr><td>1</td><td>Laptop</td><td>$1,200</td><td>15</td></tr>
        <tr><td>2</td><td>Monitor</td><td>$350</td><td>42</td></tr>
        <tr><td>3</td><td>Keyboard</td><td>$80</td><td>108</td></tr>
      </tbody>
    </table>

    <h5>Hover + Bordered</h5>
    <table class="table table-bordered table-hover">
      <thead class="table-dark">
        <tr><th>#</th><th>City</th><th>Country</th><th>Population</th></tr>
      </thead>
      <tbody>
        <tr><td>1</td><td>Tokyo</td><td>Japan</td><td>37M</td></tr>
        <tr><td>2</td><td>New York</td><td>USA</td><td>8.5M</td></tr>
        <tr><td>3</td><td>London</td><td>UK</td><td>9M</td></tr>
      </tbody>
    </table>
  </div>
</body>
</html>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

3. 表格变体

class 效果 场景
table 基础样式（排版、边距、水平线） 最小化表格
table-striped 隔行浅灰背景 数据/报表
table-bordered 所有单元格加边框 需要清晰分界
table-borderless 无边框 极简设计
table-hover 行悬停时加深背景 可交互表格
table-sm 紧凑版（padding 减半） 数据密集的表格

4. 行/列颜色

HTML 
<table class="table">
  <thead>
    <tr><th>Task</th><th>Status</th><th>Due</th></tr>
  </thead>
  <tbody>
    <tr class="table-success">
      <td>Design review</td><td>Completed</td><td>Jun 10</td>
    </tr>
    <tr class="table-warning">
      <td>Frontend implementation</td><td>In Progress</td><td>Jun 20</td>
    </tr>
    <tr class="table-danger">
      <td>Database migration</td><td>Overdue</td><td>Jun 5</td>
    </tr>
  </tbody>
</table>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

class 含义 使用时机
table-primary 蓝色 信息行
table-success 绿色 成功/已完成
table-danger 红色 错误/逾期
table-warning 黄色 警告/进行中
table-info 青色 提示/信息
table-active 灰色 选中/高亮

5. 表头颜色

HTML 
<table class="table">
  <thead class="table-dark">
    <tr><th>Dark Header</th><th>Column</th></tr>
  </thead>
  <tbody>
    <tr><td>Data</td><td>Data</td></tr>
  </tbody>
</table>

<table class="table">
  <thead class="table-light">
    <tr><th>Light Header</th><th>Column</th></tr>
  </thead>
  <tbody>
    <tr><td>Data</td><td>Data</td></tr>
  </tbody>
</table>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

6. 响应式表格

HTML 
<div class="table-responsive">
  <table class="table table-bordered">
    <thead>
      <tr><th>#</th><th>Name</th><th>Email</th><th>Phone</th><th>Address</th><th>City</th><th>Country</th><th>Status</th></tr>
    </thead>
    <tbody>
      <tr><td>1</td><td>Alice</td><td>alice@example.com</td><td>+1-555-0100</td><td>123 Main St</td><td>New York</td><td>USA</td><td>Active</td></tr>
    </tbody>
  </table>
</div>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。 也可指定断点：table-responsive-sm / table-responsive-md / table-responsive-lg。

7. 更多表格示例

▶ 示例：综合数据表格

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Advanced Table Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <table class="table table-striped table-bordered table-hover">
      <thead class="table-dark">
        <tr>
          <th>Order ID</th>
          <th>Customer</th>
          <th>Product</th>
          <th>Amount</th>
          <th>Status</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>#1024</td>
          <td>Alice Chen</td>
          <td>Wireless Mouse</td>
          <td>$29.99</td>
          <td><span class="badge bg-success">Shipped</span></td>
          <td><button class="btn btn-sm btn-outline-primary">View</button></td>
        </tr>
        <tr>
          <td>#1025</td>
          <td>Bob Wang</td>
          <td>Mechanical Keyboard</td>
          <td>$89.99</td>
          <td><span class="badge bg-warning">Processing</span></td>
          <td><button class="btn btn-sm btn-outline-primary">View</button></td>
        </tr>
        <tr class="table-danger">
          <td>#1026</td>
          <td>Charlie Li</td>
          <td>USB-C Hub</td>
          <td>$45.00</td>
          <td><span class="badge bg-danger">Cancelled</span></td>
          <td><button class="btn btn-sm btn-outline-primary">View</button></td>
        </tr>
        <tr>
          <td>#1027</td>
          <td>Diana Zhang</td>
          <td>Monitor Stand</td>
          <td>$34.99</td>
          <td><span class="badge bg-success">Delivered</span></td>
          <td><button class="btn btn-sm btn-outline-primary">View</button></td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

▶ 示例：条纹悬停表格

HTML 
<table class="table table-striped table-hover">
  <thead>
    <tr>
      <th>Rank</th>
      <th>Player</th>
      <th>Score</th>
      <th>Level</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>PlayerOne</td>
      <td>9,850</td>
      <td>Expert</td>
    </tr>
    <tr>
      <td>2</td>
      <td>SpeedRunner</td>
      <td>8,720</td>
      <td>Advanced</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Newbie99</td>
      <td>4,310</td>
      <td>Intermediate</td>
    </tr>
    <tr>
      <td>4</td>
      <td>GameMaster</td>
      <td>2,105</td>
      <td>Beginner</td>
    </tr>
  </tbody>
</table>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

▶ 示例：带徽章和按钮的表格

HTML 
<table class="table table-sm">
  <thead class="table-light">
    <tr>
      <th>Task</th>
      <th>Priority</th>
      <th>Assignee</th>
      <th>Due Date</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Design homepage</td>
      <td><span class="badge bg-danger">High</span></td>
      <td>Alice</td>
      <td>2026-07-10</td>
      <td><button class="btn btn-success btn-sm">Complete</button></td>
    </tr>
    <tr>
      <td>Write API docs</td>
      <td><span class="badge bg-warning">Medium</span></td>
      <td>Bob</td>
      <td>2026-07-15</td>
      <td><button class="btn btn-outline-primary btn-sm">Edit</button></td>
    </tr>
    <tr>
      <td>Fix login bug</td>
      <td><span class="badge bg-danger">Critical</span></td>
      <td>Charlie</td>
      <td>2026-07-08</td>
      <td><button class="btn btn-danger btn-sm">Fix Now</button></td>
    </tr>
    <tr>
      <td>Update dependencies</td>
      <td><span class="badge bg-success">Low</span></td>
      <td>Diana</td>
      <td>2026-07-20</td>
      <td><button class="btn btn-outline-secondary btn-sm">Skip</button></td>
    </tr>
  </tbody>
</table>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

▶ 示例：响应式表格演示

HTML 
<div class="table-responsive">
  <table class="table table-bordered">
    <thead class="table-primary">
      <tr>
        <th>#</th>
        <th>Full Name</th>
        <th>Email</th>
        <th>Phone</th>
        <th>Department</th>
        <th>Role</th>
        <th>Status</th>
        <th>Joined</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Alice Chen</td>
        <td>alice@company.com</td>
        <td>+1-555-0101</td>
        <td>Engineering</td>
        <td>Senior Developer</td>
        <td><span class="badge bg-success">Active</span></td>
        <td>2024-03-15</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Bob Wang</td>
        <td>bob@company.com</td>
        <td>+1-555-0102</td>
        <td>Design</td>
        <td>UI/UX Lead</td>
        <td><span class="badge bg-success">Active</span></td>
        <td>2024-06-01</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Charlie Li</td>
        <td>charlie@company.com</td>
        <td>+1-555-0103</td>
        <td>Marketing</td>
        <td>Content Manager</td>
        <td><span class="badge bg-warning">On Leave</span></td>
        <td>2023-11-20</td>
      </tr>
    </tbody>
  </table>
</div>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

(1) 表格样式选项流程图

100% 
flowchart LR
    A[table] --> B[基础样式]
    A --> C[table-striped 隔行变色]
    A --> D[table-hover 悬停加深]
    A --> E[table-bordered 全边框]
    A --> F[table-borderless 无边框]
    A --> G[table-sm 紧凑]
    A --> H[table-responsive 水平滚动]
    H --> I[table-responsive-sm]
    H --> J[table-responsive-md]
    H --> K[table-responsive-lg]

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

table class 效果 典型场景
table 基础水平线 + 排版 最小化数据表
table-striped 奇数行浅灰 列表/报表
table-bordered 所有单元格带边框 财务/统计表
table-borderless 完全无边框 信息卡风格
table-hover 悬停行加深 可交互列表
table-sm padding 减半 数据密集场景
行颜色 语义 数据含义
table-primary 蓝色 信息/选中行
table-success 绿色 成功/已完成
table-danger 红色 失败/逾期
table-warning 黄色 警告/进行中
table-info 青色 提示/新数据
table-active 灰色 当前高亮行
响应式变体 滚动触发断点 场景
table-responsive 始终滚动 多列数据表
table-responsive-sm <576px 手机端适配
table-responsive-md <768px 平板适配
table-responsive-lg <992px 桌面小屏
table-responsive-xl <1200px 大屏适配

❓ 常见问题

Q 表格中的按钮或 badge 样式对吗？
A 完全没问题。Bootstrap 的所有组件在表格内都保持正常样式。你可以在 <td> 内放按钮、徽章、开关等。
Q 表格可以做排序/搜索/分页吗？
A Bootstrap 的 table 只负责样式。排序/搜索/分页需要结合 JavaScript 库（如 DataTables）自行实现。
Q table-striped 和 table-hover 一起用时行的颜色会冲突吗？
A 不会。颜色层级：行颜色 > hover > striped。带颜色的行在悬停时会略微加深。
Q 响应式表格的滚动条只在需要时才显示吗？
A 是的。table-responsive 设置 overflow-x: auto，只有当表格宽度超过容器宽度时才会出现水平滚动条，内容较少时滚动条自动隐藏。
Q table-striped 可以和自定义行颜色（如 table-success）一起使用吗？
A 可以。自定义行颜色的优先级高于 striping，应用了 table-success 的行不会被 striped 覆盖。如需要让带颜色的行也参与隔行变色，建议仅用 CSS 自定义。

📖 小节

📝 作业

  1. ⭐ 创建一个产品库存表格：列包括 ID、名称、分类、价格、库存量、状态，表格带 table-striped + table-hover。
  2. ⭐⭐ 将作业 1 的表格包裹在 table-responsive 中，在手机上水平滚动查看。
  3. ⭐⭐⭐ 创建一个用户管理表格：三行用户数据，每行最后一列包含"编辑"和"删除"两个按钮，表头用 table-dark。

上一课： 列表组与徽章 · 下一课： 表单

Web-Tutorial.com

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。

100%

🙏 帮我们做得更好

我们是刚上线的编程教程站，几个人的小团队，精力有限。页面虽经检查，难免还有疏漏——链接失效、排版错乱、内容有误、语言生硬……

如果您发现了，麻烦告诉我们，我们会在收到反馈后第一时间进行修复，再次感谢您的光临 🙏