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 值。










