CSS边框属性对Table单元格的特殊作用_border-spacing

border-spacing 仅在 border-collapse: separate 时生效，设为 collapse 则被忽略；它作用于 table 元素，控制单元格边框外侧间距，不支持负值和百分比，ie8 及以下不支持。

border-spacing 不作用于 table 的 border-collapse: collapse 模式

你设了 border-spacing: 10px 却没看到单元格间有空隙？大概率是因为 table 上同时写了 border-collapse: collapse —— 这俩是互斥的。border-spacing 只在 border-collapse: separate（默认值）下生效，一旦切到 collapse，它就完全被忽略，连 warning 都不报。

常见错误现象：border-spacing 看似“失效”，其实是被 border-collapse 覆盖了；调试时只盯着 border-spacing 值，却漏看父级 table 的 border-collapse 设置。

• 检查 table 元素是否显式设置了 border-collapse: collapse（包括通过重置 css 或框架默认样式引入）
• 若需间隙，必须确保 border-collapse 是 separate 或未设置（依赖浏览器默认）
• border-spacing 不能为负值；设成 0 在 separate 模式下等效于无间隙，但依然走分离渲染逻辑

border-spacing 是 table 的属性，不是 td/th 的

border-spacing 只能写在 table 元素上，对 td、th、tr 设置完全无效。有人试图用 td { margin: 5px } 或 padding 模拟单元格间距，结果破坏表格布局结构，甚至触发奇怪的换行或溢出。

使用场景：想统一控制整张表的行列间隙，比如做数据仪表盘时让数字列之间呼吸感更强；或者适配高对比度模式下需要明确视觉分隔。

立即学习“前端免费学习笔记（深入）”；

• border-spacing 接受一个值（水平=垂直）或两个值（horizontal vertical），如 border-spacing: 2px 4px
• 它影响的是单元格「边框外侧」之间的距离，不是内边距；所以不会挤压内容，也不改变 td 的盒模型尺寸
• 不支持百分比单位，只接受 px、em、rem 等绝对/相对长度

IE8 及更早版本不支持 border-spacing

如果你的项目还要兼容 IE8，border-spacing 直接不可用。这时候常见的“降级方案”是给 td 加 margin —— 但表格元素对 margin 的处理极其有限，实际无效。真正可行的 fallback 是用 border-collapse: separate + border 模拟间隙：比如设 td { border: 1px solid transparent }，再配合 border-spacing，在支持的浏览器里显示真实间隙，在 IE8 里至少保留透明边框占位，避免紧贴。

性能影响极小，但它会参与表格的 layout 计算路径；在超大表格（千行+）中，频繁修改 border-spacing 可能比改 padding 触发更多重排。

• 现代浏览器（chrome/firefox/safari/edge）全部支持，无需前缀
• 注意 Safari 旧版（border-spacing 动画的支持不稳定，不要用 transition 过渡它
• 如果用 CSS-in-JS 或 Shadow DOM，确保样式作用域正确——它必须落在 table 节点上，而非封装内部

border-spacing 和 cellspacing 的关系

HTML 属性 cellspacing 是 border-spacing 的前身，现在已被废弃。设 <table cellspacing="5"> 在现代浏览器中，会自动映射为 <code>border-spacing: 5px（且强制 border-collapse: separate）。但两者行为不完全等价：当 HTML 和 CSS 同时存在时，CSS 的 border-spacing 会覆盖 cellspacing；而如果只写 cellspacing，它只控制水平方向（早期浏览器行为），现代浏览器则统一解释为二维间距。

• 新项目一律用 CSS border-spacing，别碰 cellspacing
• 迁移老代码时，检查是否同时存在 cellspacing 和 border-spacing，后者优先级更高
• cellspacing="0" 并不等于“无间隙”——它只是把映射值设为 0，最终表现仍取决于 border-collapse 模式

事情说清了就结束。最常被忽略的，是那个默认隐藏的 border-collapse: collapse —— 它可能来自 reset.css、UI 框架，甚至浏览器自身对某些语义化表格的隐式优化。调 border-spacing 前，先查 table 元素 computed style 里的 border-collapse 值。