CSS border-spacing 边框间距-代码号

CSS border-spacing 属性详解与应用指南

边框间距属性概述

CSS border-spacing 属性用于设置表格中相邻单元格边框之间的间距。该属性仅在 border-collapse 属性值为 separate（分离模式）时生效，在 collapse（合并模式）下不会产生任何间距效果。

border-spacing 支持使用一个或两个值来定义间距：

单值语法：同时设置水平和垂直方向的间距
双值语法：第一个值设置水平间距，第二个值设置垂直间距

基础语法

table {
    border-spacing: length | initial | inherit;
}

属性值说明

length：使用 px、em、rem、pt 等单位指定间距尺寸，不支持负值
initial：将属性重置为默认值（通常为 0）
inherit：继承父元素的属性值

应用实例演示

示例1：统一间距设置（单值语法）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <style>
        .spacing-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 20px; /* 统一设置20px间距 */
            margin: 30px 0;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        
        .spacing-table th,
        .spacing-table td {
            border: 2px solid #3498DB;
            padding: 15px;
            text-align: center;
            background-color: #EBF5FB;
            border-radius: 8px;
        }
        
        .spacing-table th {
            background-color: #3498DB;
            color: white;
            font-weight: 600;
            border: 2px solid #2C3E50;
        }
        
        .spacing-table caption {
            caption-side: top;
            font-size: 1.3em;
            font-weight: bold;
            margin-bottom: 15px;
            color: #2C3E50;
        }
        
        .table-container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="table-container">
        <table class="spacing-table">
            <caption>项目进度表 - 统一间距效果</caption>
            <thead>
                <tr>
                    <th>项目名称</th>
                    <th>负责人</th>
                    <th>开始日期</th>
                    <th>结束日期</th>
                    <th>完成进度</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>官网重构</td>
                    <td>张设计师</td>
                    <td>2025-01-15</td>
                    <td>2025-03-20</td>
                    <td>85%</td>
                </tr>
                <tr>
                    <td>移动端应用</td>
                    <td>李工程师</td>
                    <td>2025-02-01</td>
                    <td>2025-05-30</td>
                    <td>45%</td>
                </tr>
                <tr>
                    <td>数据库迁移</td>
                    <td>王管理员</td>
                    <td>2025-01-10</td>
                    <td>2025-02-28</td>
                    <td>100%</td>
                </tr>
                <tr>
                    <td>用户体验优化</td>
                    <td>赵研究员</td>
                    <td>2025-03-01</td>
                    <td>2025-06-30</td>
                    <td>30%</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

示例2：差异化间距设置（双值语法）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <style>
        .differential-spacing {
            width: 100%;
            border-collapse: separate;
            border-spacing: 15px 8px; /* 水平15px 垂直8px */
            margin: 30px 0;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        
        .differential-spacing th,
        .differential-spacing td {
            border: 2px solid #E74C3C;
            padding: 12px;
            text-align: center;
            background-color: #FDEDEC;
            border-radius: 6px;
        }
        
        .differential-spacing th {
            background-color: #E74C3C;
            color: white;
            font-weight: 600;
            border: 2px solid #C0392B;
        }
        
        .differential-spacing tr:hover td {
            background-color: #F9EBEA;
            transform: scale(1.02);
            transition: all 0.3s ease;
        }
        
        .differential-spacing caption {
            caption-side: top;
            font-size: 1.3em;
            font-weight: bold;
            margin-bottom: 15px;
            color: #C0392B;
        }
        
        /* 斑马纹效果 */
        .differential-spacing tr:nth-child(even) td {
            background-color: #FADBD8;
        }
    </style>
</head>
<body>
    <div class="table-container">
        <table class="differential-spacing">
            <caption>销售数据表 - 差异化间距效果</caption>
            <thead>
                <tr>
                    <th>产品类别</th>
                    <th>一月销量</th>
                    <th>二月销量</th>
                    <th>三月销量</th>
                    <th>季度总计</th>
                    <th>同比增长</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>智能手机</td>
                    <td>1,234</td>
                    <td>1,567</td>
                    <td>1,890</td>
                    <td>4,691</td>
                    <td>+18.5%</td>
                </tr>
                <tr>
                    <td>笔记本电脑</td>
                    <td>856</td>
                    <td>912</td>
                    <td>1,045</td>
                    <td>2,813</td>
                    <td>+12.3%</td>
                </tr>
                <tr>
                    <td>智能家居</td>
                    <td>567</td>
                    <td>689</td>
                    <td>782</td>
                    <td>2,038</td>
                    <td>+25.7%</td>
                </tr>
                <tr>
                    <td>穿戴设备</td>
                    <td>1,089</td>
                    <td>1,234</td>
                    <td>1,456</td>
                    <td>3,779</td>
                    <td>+15.2%</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

示例3：响应式间距设计

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .responsive-spacing {
            width: 100%;
            border-collapse: separate;
            border-spacing: 20px 10px;
            margin: 30px 0;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        
        .responsive-spacing th,
        .responsive-spacing td {
            border: 2px solid #27AE60;
            padding: 15px;
            text-align: center;
            background-color: #EAFAF1;
            border-radius: 8px;
        }
        
        .responsive-spacing th {
            background-color: #27AE60;
            color: white;
            font-weight: 600;
        }
        
        .responsive-spacing caption {
            caption-side: top;
            font-size: 1.3em;
            font-weight: bold;
            margin-bottom: 15px;
            color: #196F;
        }
        
        /* 移动端适配 */
        @media screen and (max-width: 768px) {
            .responsive-spacing {
                border-spacing: 10px 5px; /* 减小间距 */
            }
            
            .responsive-spacing th,
            .responsive-spacing td {
                padding: 8px;
                font-size: 14px;
            }
            
            /* 小屏幕下隐藏次要列 */
            .responsive-spacing td:nth-child(4),
            .responsive-spacing th:nth-child(4) {
                display: none;
            }
        }
        
        @media screen and (max-width: 480px) {
            .responsive-spacing {
                border-spacing: 5px 3px; /* 进一步减小间距 */
            }
            
            .responsive-spacing th,
            .responsive-spacing td {
                padding: 6px;
                font-size: 12px;
            }
        }
        
        .table-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="table-container">
        <table class="responsive-spacing">
            <caption>团队成员表 - 响应式间距设计</caption>
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>职位</th>
                    <th>部门</th>
                    <th>入职时间</th>
                    <th>联系方式</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>张明</td>
                    <td>前端工程师</td>
                    <td>技术部</td>
                    <td>2025-03-15</td>
                    <td>zhang@ebingou.cn</td>
                </tr>
                <tr>
                    <td>李华</td>
                    <td>UI设计师</td>
                    <td>设计部</td>
                    <td>2025-08-20</td>
                    <td>li@ebingou.cn</td>
                </tr>
                <tr>
                    <td>王芳</td>
                    <td>产品经理</td>
                    <td>产品部</td>
                    <td>2025-05-10</td>
                    <td>wang@ebingou.cn</td>
                </tr>
                <tr>
                    <td>陈强</td>
                    <td>后端工程师</td>
                    <td>技术部</td>
                    <td>2025-01-08</td>
                    <td>chen@ebingou.cn</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

示例4：高级间距效果组合

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <style>
        .advanced-spacing {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0; /* 无间距，使用其他方式创建视觉效果 */
            margin: 30px 0;
            font-family: 'Microsoft YaHei', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 20px;
            border-radius: 15px;
        }
        
        .advanced-spacing th,
        .advanced-spacing td {
            border: 2px solid rgba(255, 255, 255, 0.2);
            padding: 15px;
            text-align: center;
            background-color: rgba(255, 255, 255, 0.9);
            margin: 10px; /* 模拟间距效果 */
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        .advanced-spacing th {
            background-color: rgba(52, 152, 219, 0.9);
            color: white;
            font-weight: 600;
            border: 2px solid rgba(41, 128, 185, 0.8);
        }
        
        .advanced-spacing tr {
            margin: 15px 0; /* 行间距效果 */
            display: block;
        }
        
        .advanced-spacing caption {
            caption-side: top;
            font-size: 1.4em;
            font-weight: bold;
            margin-bottom: 20px;
            color: white;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }
        
        /* 悬浮效果 */
        .advanced-spacing tr:hover td {
            background-color: rgba(255, 255, 255, 1);
            transform: translateY(-2px);
            transition: all 0.3s ease;
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        }
        
        .table-container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="table-container">
        <table class="advanced-spacing">
            <caption>项目绩效表 - 高级间距效果</caption>
            <thead>
                <tr>
                    <th>项目名称</th>
                    <th>完成质量</th>
                    <th>进度控制</th>
                    <th>团队协作</th>
                    <th>综合评分</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>企业官网重构</td>
                    <td>A</td>
                    <td>B+</td>
                    <td>A</td>
                    <td>A-</td>
                </tr>
                <tr>
                    <td>移动应用开发</td>
                    <td>A-</td>
                    <td>A</td>
                    <td>B+</td>
                    <td>A-</td>
                </tr>
                <tr>
                    <td>数据迁移项目</td>
                    <td>B+</td>
                    <td>A-</td>
                    <td>A</td>
                    <td>B+</td>
                </tr>
                <tr>
                    <td>系统性能优化</td>
                    <td>A</td>
                    <td>A</td>
                    <td>A-</td>
                    <td>A</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

本节课程知识要点

核心技术掌握

模式依赖：理解 border-spacing 只在分离模式下生效
语法运用：掌握单值和双值语法的正确使用
单位选择：合理使用 px、em、rem 等不同单位
响应式设计：根据屏幕尺寸调整间距大小

设计原则建议

视觉平衡：保持间距与表格内容的协调性
可读性优先：确保间距设置不影响数据阅读
一致性：在整个项目中保持统一的间距标准
适度原则：避免过大或过小的间距影响用户体验

性能优化提示

使用相对单位（em、rem）提高响应式适应性
避免过度复杂的间距组合
考虑使用CSS变量管理间距值
注意浏览器兼容性处理

浏览器兼容性处理

/* 渐进增强写法 */
.modern-spacing {
    border-collapse: separate;
    border-spacing: 1rem; /* 现代浏览器 */
}

/* 传统浏览器备用方案 */
.legacy-table {
    border: 0;
    border-spacing: 0;
}

.legacy-table th,
.legacy-table td {
    margin: 0.5rem;
    padding: 1rem;
    border: 1px solid #ccc;
}

实用技巧与实践

1. 结合其他表格属性使用

.enhanced-table {
    border-collapse: separate;
    border-spacing: 15px 10px;
    empty-cells: show; /* 控制空单元格显示 */
    width: 100%;
}

.enhanced-table th,
.enhanced-table td {
    padding: 12px;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
}

2. 创建特殊视觉效果

.special-effect {
    border-collapse: separate;
    border-spacing: 0 20px; /* 只有垂直间距 */
}

.special-effect tr {
    background: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
}

.special-effect td {
    border: none;
    border-radius: 0;
}

3. 响应式间距方案

.responsive-table {
    border-collapse: separate;
    border-spacing: 20px;
}

@media (max-width: 1024px) {
    .responsive-table {
        border-spacing: 15px;
    }
}

@media (max-width: 768px) {
    .responsive-table {
        border-spacing: 10px;
    }
}

@media (max-width: 480px) {
    .responsive-table {
        border-spacing: 5px;
    }
}

CSS border-spacing 属性是表格设计中重要的间距控制工具，通过合理运用可以：

提升可读性：通过合适的间距改善数据展示效果
增强美观性：创建视觉上更加舒适的表格布局
支持响应式：适应不同屏幕尺寸的显示需求
保持一致性：确保整个项目的表格样式统一

关键实践要点：

始终与 border-collapse: separate 配合使用
根据内容密度调整合适的间距值
考虑移动端用户的阅读体验
测试不同浏览器的渲染效果

通过掌握 border-spacing 属性的各种应用技巧，开发者能够创建出既美观又实用的数据表格，显著提升用户体验。

本文标签：

CSS border-spacing 边框间距