border-spacing 是 html5 中替代 cellspacing 的唯一可靠方案，但仅在 border-collapse: separate 时生效；常见失效原因是误设 collapse、单位错误、padding/margin 干扰或 ie8 兼容问题。
cellspacing 已被 HTML5 废弃，不能靠它稳定控制表格间隙。真正可用、可预测、可维护的替代方案只有 border-spacing —— 但它不是“写了就生效”，必须满足特定条件。
为什么 border-spacing 写了没反应？
最常见原因：border-collapse 值不是 separate。
-
border-spacing只在border-collapse: separate模式下起作用；默认值或显式设为collapse时，该属性完全被忽略 - 检查是否误写了
border-collapse: collapse（比如为了“去缝”顺手加了），这会直接废掉border-spacing - 不要在
tr或td上设border-collapse—— 它只对table元素有效
border-spacing 的参数写法和单位陷阱
它接受一个或两个长度值，但格式和单位容错性很低：
- 写成
border-spacing: 4px 2px：第一个是水平间距，第二个是垂直间距（中间是空格，不是逗号） - 写成
border-spacing: 6px：等效于6px 6px，即横竖都 6px - 单位优先用
px；em或rem在 IE8–IE11 和某些旧版 Safari 中行为不一致，容易导致间距消失或错位 - 不允许负值；设成
0就是彻底消除单元格间空隙，等效于旧写法cellspacing="0"
为什么看起来还有“缝隙”？别只盯着 border-spacing
即使 border-spacing 正确设置为 0，表格仍可能有视觉间隙，真正干扰项往往是：
-
th和td默认带padding（通常 8–10px），这不是cellspacing控制的范围，必须单独重置：th, td { padding: 0; } - 表格外层容器（如
div）或caption元素自带margin，会被误认为是单元格间距 -
font-size: 0或换行符产生的空白节点，会让table底部/右侧出现 1–2px 微小间隙，需用font-size: 0配合vertical-align: top清除
IE8 兼容场景下的双保险写法
如果你的项目仍需支持 IE8，且页面已声明标准 doctype（），可以安全使用 <code>border-spacing；但若无法保证 doctype 或需兼容更老环境：
- 不要删掉
cellspacing属性，而是保留并叠加 CSS：<table cellspacing="0" style="border-collapse: separate; border-spacing: 0;"> <li>避免在 JS 中动态切换 <code>border-collapse值（比如折叠/展开行时切collapse/separate），这会导致border-spacing瞬间失效，引发视觉跳变 - 记住：
border-spacing不继承 —— 它只对table生效，tbody、tr上设它毫无意义
真正难搞的从来不是怎么写 border-spacing，而是排查那些和它无关却长得像它的“假缝隙”——padding、margin、line-height、甚至 HTML 换行符，都可能冒充单元格间距。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
