垦荒学园 - 以垦荒之心，赴成长之约

切换主题

Bootstrap 表格 ​

概述 ​

Bootstrap 为表格提供了丰富的样式选项，包括基本样式、条纹行、边框、悬停效果等。这些样式让表格更加美观和易读。

基本表格 ​

使用 .table 类为任何 <table> 添加基本样式：

html
<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>技术部</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>王五</td>
            <td>产品经理</td>
            <td>产品部</td>
        </tr>
    </tbody>
</table>

表格变体 ​

深色表格 ​

使用 .table-dark 创建深色表格：

html
<table class="table table-dark">
    <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>
    </tbody>
</table>

条纹行表格 ​

使用 .table-striped 为表格行添加斑马条纹：

html
<table class="table table-striped">
    <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>技术部</td>
        </tr>
    </tbody>
</table>

可悬停行表格 ​

使用 .table-hover 在表格行上启用悬停状态：

html
<table class="table table-hover">
    <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>技术部</td>
        </tr>
    </tbody>
</table>

表格边框 ​

带边框表格 ​

使用 .table-bordered 为表格和单元格添加边框：

html
<table class="table table-bordered">
    <thead>
        <tr>
            <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>
        </tr>
    </tbody>
</table>

无边框表格 ​

使用 .table-borderless 创建无边框表格：

html
<table class="table table-borderless">
    <thead>
        <tr>
            <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>
        </tr>
    </tbody>
</table>

紧凑表格 ​

使用 .table-sm 通过将单元格填充减半来使表格更紧凑：

html
<table class="table table-sm">
    <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>技术部</td>
        </tr>
    </tbody>
</table>

表格颜色 ​

表头颜色 ​

html
<!-- 深色表头 -->
<table class="table">
    <thead class="table-dark">
        <tr>
            <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>
        </tr>
    </tbody>
</table>

<!-- 浅色表头 -->
<table class="table">
    <thead class="table-light">
        <tr>
            <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>
        </tr>
    </tbody>
</table>

行和单元格颜色 ​

使用上下文类为表格行或单元格着色：

html
<table class="table">
    <thead>
        <tr>
            <th scope="col">类</th>
            <th scope="col">标题</th>
            <th scope="col">标题</th>
        </tr>
    </thead>
    <tbody>
        <tr class="table-active">
            <th scope="row">Active</th>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr class="table-primary">
            <th scope="row">Primary</th>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr class="table-secondary">
            <th scope="row">Secondary</th>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr class="table-success">
            <th scope="row">Success</th>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr class="table-danger">
            <th scope="row">Danger</th>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr class="table-warning">
            <th scope="row">Warning</th>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr class="table-info">
            <th scope="row">Info</th>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr class="table-light">
            <th scope="row">Light</th>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr class="table-dark">
            <th scope="row">Dark</th>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </tbody>
</table>

响应式表格 ​

水平滚动 ​

使用 .table-responsive 创建响应式表格，在小屏幕上水平滚动：

html
<div class="table-responsive">
    <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>
                <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>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
        </tbody>
    </table>
</div>

断点特定的响应式表格 ​

html
<!-- 在 small 及以下断点响应式 -->
<div class="table-responsive-sm">
    <table class="table">
        <!-- 表格内容 -->
    </table>
</div>

<!-- 在 medium 及以下断点响应式 -->
<div class="table-responsive-md">
    <table class="table">
        <!-- 表格内容 -->
    </table>
</div>

<!-- 在 large 及以下断点响应式 -->
<div class="table-responsive-lg">
    <table class="table">
        <!-- 表格内容 -->
    </table>
</div>

实际示例 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 表格示例</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container my-5">
        <h1>Bootstrap 表格示例</h1>
        
        <!-- 基本表格 -->
        <h2>基本表格</h2>
        <table class="table">
            <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">1</th>
                    <td>张三</td>
                    <td>zhangsan@example.com</td>
                    <td>技术部</td>
                    <td><span class="badge bg-success">在职</span></td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>李四</td>
                    <td>lisi@example.com</td>
                    <td>产品部</td>
                    <td><span class="badge bg-warning">休假</span></td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>王五</td>
                    <td>wangwu@example.com</td>
                    <td>设计部</td>
                    <td><span class="badge bg-danger">离职</span></td>
                </tr>
            </tbody>
        </table>
        
        <!-- 条纹和悬停表格 -->
        <h2>条纹和悬停效果</h2>
        <table class="table table-striped table-hover">
            <thead class="table-dark">
                <tr>
                    <th scope="col">产品</th>
                    <th scope="col">价格</th>
                    <th scope="col">库存</th>
                    <th scope="col">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>笔记本电脑</td>
                    <td>¥5,999</td>
                    <td>15</td>
                    <td>
                        <button class="btn btn-sm btn-primary">编辑</button>
                        <button class="btn btn-sm btn-danger">删除</button>
                    </td>
                </tr>
                <tr>
                    <td>智能手机</td>
                    <td>¥2,999</td>
                    <td>32</td>
                    <td>
                        <button class="btn btn-sm btn-primary">编辑</button>
                        <button class="btn btn-sm btn-danger">删除</button>
                    </td>
                </tr>
                <tr>
                    <td>平板电脑</td>
                    <td>¥1,999</td>
                    <td>8</td>
                    <td>
                        <button class="btn btn-sm btn-primary">编辑</button>
                        <button class="btn btn-sm btn-danger">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
        
        <!-- 带边框的紧凑表格 -->
        <h2>带边框的紧凑表格</h2>
        <table class="table table-bordered table-sm">
            <thead>
                <tr>
                    <th scope="col">日期</th>
                    <th scope="col">事件</th>
                    <th scope="col">类型</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>2024-01-15</td>
                    <td>项目启动会议</td>
                    <td><span class="badge bg-info">会议</span></td>
                </tr>
                <tr>
                    <td>2024-01-20</td>
                    <td>需求评审</td>
                    <td><span class="badge bg-warning">评审</span></td>
                </tr>
                <tr>
                    <td>2024-01-25</td>
                    <td>版本发布</td>
                    <td><span class="badge bg-success">发布</span></td>
                </tr>
            </tbody>
        </table>
        
        <!-- 响应式表格 -->
        <h2>响应式表格</h2>
        <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>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row">1</th>
                        <td>admin</td>
                        <td>admin@example.com</td>
                        <td>2024-01-01</td>
                        <td>2024-01-15 10:30</td>
                        <td><span class="badge bg-success">活跃</span></td>
                        <td>管理员</td>
                        <td>
                            <button class="btn btn-sm btn-outline-primary">查看</button>
                            <button class="btn btn-sm btn-outline-secondary">编辑</button>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">2</th>
                        <td>user001</td>
                        <td>user001@example.com</td>
                        <td>2024-01-05</td>
                        <td>2024-01-14 15:20</td>
                        <td><span class="badge bg-success">活跃</span></td>
                        <td>普通用户</td>
                        <td>
                            <button class="btn btn-sm btn-outline-primary">查看</button>
                            <button class="btn btn-sm btn-outline-secondary">编辑</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>

表格最佳实践 ​

  1. 使用语义化标记：正确使用 <thead>、<tbody>、<th> 和 <td> 标签
  2. 添加 scope 属性：为表头单元格添加 scope 属性提高可访问性
  3. 保持数据一致性：确保每列的数据类型和格式一致
  4. 适当使用颜色：用颜色突出重要信息，但不要过度使用
  5. 考虑响应式：在移动设备上确保表格可用性

下一步 ​

现在你已经掌握了 Bootstrap 表格的使用方法，接下来我们将学习图像和形状。

下一章：Bootstrap 图像形状 →

本站内容仅供学习和研究使用。

Copyright 2025 垦荒教程 kenhuang.com All Rights Reserved. 备案号：粤ICP备17084064号-3 | 免责声明