border-spacing 是唯一符合 html5 标准的单元格间距设置方式，需配合 border-collapse: separate 使用，仅作用于 table 元素，不支持负值，接受一或两个长度值（先横后竖），不可用 padding 替代。

border-spacing 是当前唯一可靠、语义正确且符合 HTML5 标准的设置单元格间距的方式。`cellspacing` 属性已废弃，不应再使用。

为什么 border-spacing 不生效？

最常见原因是表格的 border-collapse 被设为 collapse。该属性会强制合并边框，使单元格“贴在一起”，此时 border-spacing 完全被忽略。

• 必须确保 border-collapse: separate（这是默认值，但常被重置）
• 检查是否有全局 CSS 重置了表格样式，例如 table { border-collapse: collapse; }
• border-spacing 只作用于 <table> 元素，不能写在 <code><td> 或 <code><tr> 上 <li>不支持负值，单位必须是 <code>px、em 等合法长度单位

border-spacing 的参数怎么配？

它接受一个或两个长度值：

• border-spacing: 10px → 水平和垂直间距都是 10px
• border-spacing: 12px 4px → 水平 12px，垂直 4px（注意顺序：先横后竖）
• 不能写成 border-spacing: 4px 12px 并指望它“垂直优先”——CSS 规范明确约定第一个值是水平间距

示例：


HTML汇报生成器
🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。
下载

A	B
C	D

别用 padding 模拟单元格间距

给 <td> 加 <code>padding 看起来像有间距，但它改变的是内容到边框的距离，不是单元格之间的空隙。这会导致：

• 表格总宽度不可控（padding 累加进单元格尺寸）
• 边框视觉错位（尤其当 border-collapse: collapse 时，padding 会让边框“浮起来”）
• 无法实现真正的“单元格间隙”效果（比如想让背景色透出间隔，padding 做不到）

真正需要单元格之间留白，就只动 border-spacing，其他地方别碰。

兼容性与维护提醒

border-spacing 在所有现代浏览器中完全支持，包括 IE8+。但要注意：如果你的项目仍需支持旧版 IE（如 IE7），cellspacing 属性虽废弃，反而是当时唯一选择——不过 2026 年还保留在意 IE7 的场景，基本只存在于遗留系统维护中，而非新开发。

实际项目里最容易被忽略的一点：团队成员可能在不同文件里分别设置了 border-collapse 和 border-spacing，导致样式冲突。建议统一在基础表格类（如 .table-spaced）中封装这两个声明，避免零散覆盖。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！