CSS3 表单与表格 - 表格样式 - border-collapse

核心知识点讲解

border-collapse 属性概述

border-collapse 属性用于控制表格边框的合并方式，它有两个主要值：

  1. separate：默认值，边框分离模式，每个单元格都有独立的边框
  2. collapse：边框合并模式，相邻单元格的边框会被合并为一个单一的边框

语法结构

table {
    border-collapse: separate | collapse | inherit;
}

关键特性

  • separate 模式：

    • 每个单元格都有独立的边框
    • 可以使用 border-spacing 属性设置单元格之间的间距
    • 边框之间有空隙

  • collapse 模式：

    • 相邻单元格的边框会被合并
    • 消除了单元格之间的空隙
    • 边框宽度会取相邻单元格边框宽度的最大值

适用场景

  • separate 模式：适合需要单元格之间有明确分隔的场景，如数据表格
  • collapse 模式：适合需要边框紧密连接的场景，如表单、紧凑的信息表格

实用案例分析

案例1：border-collapse: separate（默认）

HTML结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>border-collapse: separate 示例</title>
    <style>
        /* border-collapse: separate 示例 */
        .separate-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 10px;
            font-family: Arial, sans-serif;
            font-size: 14px;
            color: #333;
        }
        
        .separate-table th,
        .separate-table td {
            padding: 12px;
            text-align: left;
            border: 2px solid #2196F3;
            border-radius: 4px;
        }
        
        .separate-table th {
            background-color: #e3f2fd;
            font-weight: 600;
        }
        
        .separate-table tr:hover td {
            background-color: #f5f5f5;
        }
    </style>
</head>
<body>
    <h1>border-collapse: separate 示例</h1>
    
    <table class="separate-table">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>职业</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>25</td>
                <td>男</td>
                <td>工程师</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>30</td>
                <td>女</td>
                <td>设计师</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>28</td>
                <td>男</td>
                <td>产品经理</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

效果说明：

  • 使用 border-collapse: separate 实现边框分离效果
  • 通过 border-spacing: 10px 设置单元格之间的间距
  • 每个单元格都有独立的边框和圆角
  • 实现了表头背景色和行悬停效果

案例2：border-collapse: collapse

HTML结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>border-collapse: collapse 示例</title>
    <style>
        /* border-collapse: collapse 示例 */
        .collapse-table {
            width: 100%;
            border-collapse: collapse;
            font-family: Arial, sans-serif;
            font-size: 14px;
            color: #333;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            border-radius: 4px;
            overflow: hidden;
        }
        
        .collapse-table th,
        .collapse-table td {
            padding: 12px;
            text-align: left;
            border: 1px solid #ddd;
        }
        
        .collapse-table th {
            background-color: #4CAF50;
            color: white;
            font-weight: 600;
        }
        
        .collapse-table tbody tr {
            border-bottom: 1px solid #ddd;
        }
        
        .collapse-table tbody tr:hover {
            background-color: #f5f5f5;
        }
        
        .collapse-table tbody tr:last-child {
            border-bottom: none;
        }
    </style>
</head>
<body>
    <h1>border-collapse: collapse 示例</h1>
    
    <table class="collapse-table">
        <thead>
            <tr>
                <th>产品名称</th>
                <th>价格</th>
                <th>库存</th>
                <th>状态</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>笔记本电脑</td>
                <td>¥5999</td>
                <td>15</td>
                <td>有货</td>
            </tr>
            <tr>
                <td>智能手机</td>
                <td>¥3999</td>
                <td>28</td>
                <td>有货</td>
            </tr>
            <tr>
                <td>平板电脑</td>
                <td>¥2999</td>
                <td>8</td>
                <td>有货</td>
            </tr>
            <tr>
                <td>智能手表</td>
                <td>¥1999</td>
                <td>0</td>
                <td>缺货</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

效果说明：

  • 使用 border-collapse: collapse 实现边框合并效果
  • 相邻单元格的边框被合并为一个单一的边框
  • 消除了单元格之间的空隙
  • 实现了表头背景色和行悬停效果
  • 添加了表格阴影和圆角效果

案例3：两种模式的对比

HTML结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>border-collapse 两种模式对比</title>
    <style>
        /* 表格容器 */
        .table-container {
            margin-bottom: 30px;
            padding: 20px;
            background-color: #f9f9f9;
            border-radius: 8px;
        }
        
        .table-container h2 {
            margin-top: 0;
            margin-bottom: 15px;
            font-size: 18px;
            color: #333;
        }
        
        /* separate 模式 */
        .table-separate {
            width: 100%;
            border-collapse: separate;
            border-spacing: 5px;
            font-family: Arial, sans-serif;
            font-size: 14px;
            color: #333;
        }
        
        .table-separate th,
        .table-separate td {
            padding: 8px;
            text-align: left;
            border: 1px solid #2196F3;
            background-color: white;
        }
        
        .table-separate th {
            background-color: #e3f2fd;
            font-weight: 600;
        }
        
        /* collapse 模式 */
        .table-collapse {
            width: 100%;
            border-collapse: collapse;
            font-family: Arial, sans-serif;
            font-size: 14px;
            color: #333;
        }
        
        .table-collapse th,
        .table-collapse td {
            padding: 8px;
            text-align: left;
            border: 1px solid #2196F3;
        }
        
        .table-collapse th {
            background-color: #e3f2fd;
            font-weight: 600;
        }
    </style>
</head>
<body>
    <h1>border-collapse 两种模式对比</h1>
    
    <div class="table-container">
        <h2>border-collapse: separate（边框分离）</h2>
        <table class="table-separate">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>张三</td>
                    <td>25</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>李四</td>
                    <td>30</td>
                    <td>女</td>
                </tr>
            </tbody>
        </table>
    </div>
    
    <div class="table-container">
        <h2>border-collapse: collapse（边框合并）</h2>
        <table class="table-collapse">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>张三</td>
                    <td>25</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>李四</td>
                    <td>30</td>
                    <td>女</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

效果说明：

  • 左侧表格使用 border-collapse: separate，边框分离且有间距
  • 右侧表格使用 border-collapse: collapse，边框合并且无间距
  • 两种模式的视觉效果对比明显
  • 可以根据具体需求选择合适的模式

案例4：复杂表格的边框合并

HTML结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复杂表格的边框合并</title>
    <style>
        /* 复杂表格样式 */
        .complex-table {
            width: 100%;
            border-collapse: collapse;
            font-family: Arial, sans-serif;
            font-size: 14px;
            color: #333;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            overflow: hidden;
        }
        
        .complex-table th,
        .complex-table td {
            padding: 12px;
            text-align: left;
            border: 1px solid #e0e0e0;
        }
        
        .complex-table th {
            background-color: #333;
            color: white;
            font-weight: 600;
        }
        
        .complex-table th[colspan] {
            text-align: center;
            background-color: #4CAF50;
        }
        
        .complex-table tr:hover {
            background-color: #f5f5f5;
        }
        
        .complex-table .sub-header {
            background-color: #f8f9fa;
            font-weight: 600;
        }
    </style>
</head>
<body>
    <h1>复杂表格的边框合并</h1>
    
    <table class="complex-table">
        <thead>
            <tr>
                <th colspan="5">公司部门人员统计</th>
            </tr>
            <tr>
                <th>部门</th>
                <th>职位</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>入职时间</th>
            </tr>
        </thead>
        <tbody>
            <tr class="sub-header">
                <td rowspan="3">技术部</td>
                <td rowspan="2">开发</td>
                <td>张三</td>
                <td>25</td>
                <td>2020-01-01</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>28</td>
                <td>2019-03-15</td>
            </tr>
            <tr>
                <td>测试</td>
                <td>王五</td>
                <td>26</td>
                <td>2020-06-10</td>
            </tr>
            <tr class="sub-header">
                <td rowspan="2">设计部</td>
                <td>UI设计</td>
                <td>赵六</td>
                <td>27</td>
                <td>2019-08-20</td>
            </tr>
            <tr>
                <td>UX设计</td>
                <td>孙七</td>
                <td>30</td>
                <td>2018-11-05</td>
            </tr>
            <tr class="sub-header">
                <td>产品部</td>
                <td>产品经理</td>
                <td>周八</td>
                <td>32</td>
                <td>2018-05-18</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

效果说明：

  • 使用 border-collapse: collapse 实现复杂表格的边框合并
  • 包含了 colspan 和 rowspan 属性的使用
  • 实现了多级表头和子表头
  • 添加了表格阴影和圆角效果
  • 实现了行悬停效果

浏览器兼容性

  • 现代浏览器：Chrome, Firefox, Safari, Edge 完全支持
  • 旧版浏览器：IE11 完全支持

最佳实践总结

  1. 选择合适的模式：根据具体需求选择 separate 或 collapse 模式
  2. 边框样式：在 collapse 模式下，边框样式会取相邻单元格的最大值
  3. 性能考虑：collapse 模式在处理大型表格时性能更好
  4. 视觉效果：separate 模式适合需要明确分隔的场景，collapse 模式适合需要紧凑布局的场景
  5. 与其他属性配合：separate 模式可以与 border-spacing 配合使用，collapse 模式则不需要

知识巩固与实践

  1. 实践练习：创建一个使用 border-collapse: separate 的表格，设置不同的 border-spacing 值，观察效果
  2. 扩展思考：如何在 collapse 模式下实现单元格之间的间距效果？
  3. 性能优化：对于大型表格，哪种边框合并模式性能更好？为什么？

通过本教程的学习，您应该能够熟练使用CSS3的 border-collapse 属性控制表格边框的合并方式，根据具体需求选择合适的模式，创建美观且功能完整的表格。

« 上一篇 CSS3 表单与表格 - 表格样式 - table 下一篇 » CSS3 表格样式 - empty-cells 属性
↑