border-spacing 不生效最常见原因是 border-collapse 被设为 collapse，必须显式设置 table 的 border-collapse: separate；它只作用于 table 元素，控制列距（第一值）和行距（第二值），单位仅支持长度值，不支持百分比或负值。

border-spacing 写了没反应？八成是 border-collapse 被设成了 collapse ——这个值一出现，border-spacing 就彻底失效，连 DevTools 的 computed 样式里都可能标为“invalid”。

为什么 border-spacing 不生效

最常踩的坑就是以为默认就是分离边框模式。其实浏览器虽默认 border-collapse: separate，但任何一处 CSS（比如 Bootstrap 的 .table、全局重置、甚至某行 table { border-collapse: collapse; }）都能悄悄覆盖它。

• 必须显式写 border-collapse: separate，且作用在 <table> 元素上 <li>仅检查源码写了没用，得看 DevTools 的 computed styles 里 <code>border-collapse 真实值是不是 separate
• border-spacing 只对 <table> 有效，写在 <code><td> 或 <code><tr> 上完全被忽略 <li>IE8+ 都支持，但 IE7 及更早版本不支持，若真要兼容，只能退回已废弃的 <code>cellspacing 属性

border-spacing 的两个值谁管横谁管竖

顺序固定：第一个值是列间距（水平），第二个是行间距（垂直）。和 margin 四值写法无关，也别指望它“上下左右”地理解。


html-deploy
使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。
下载
• border-spacing: 6px → 列距 6px，行距也是 6px
• border-spacing: 4px 12px → 列距 4px，行距 12px（不是“上下 4px，左右 12px”）
• 单位只认 px、rem、vw 等长度单位；%、em、负值一律被忽略
• JavaScript 动态改：用 table.style.borderSpacing = '6px 10px'，注意属性名是 borderSpacing（驼峰）

别用 padding 模拟单元格间距

padding 改的是内容到单元格边框的距离，不是单元格之间的空隙。视觉上像有间隔，但逻辑完全不同。

• 给 <td> 加 <code>padding 会让单元格实际变宽/变高，影响整表宽度计算和响应式表现
• 当 border-collapse: collapse 时，padding 会导致边框“浮起”，和相邻单元格错位
• border-spacing 产生的间隙是纯透明的，背景色、阴影、边框都能透出；padding 内部仍属单元格范围
• 想让表头和第一行数据“看起来隔开”，改 <th> 的 <code>padding-bottom，别碰 border-spacing

  含 colspan/rowspan 的表格还适用吗

  语法上仍然生效，但视觉容易误判——间隙始终出现在“相邻单元格边框之间”，不是“内容之间”。跨格单元格右侧或下方的空白位置可能不符合直觉。

  • 一个 colspan="2" 的 <th>，它右边不会出现列间距，但下方与普通 <code><td> 之间仍有垂直间距 <li>避免混合使用非对称 <code>border-spacing（如 4px 12px）和复杂跨格结构，否则校验成本陡增
  • Flex/Grid 布局下根本不能用 border-spacing ——它只属于表格渲染上下文；此时请用 gap、row-gap、column-gap

  真正难的不是写对那两行 CSS，而是判断清楚：你到底要的是「单元格之间的物理空隙」，还是「内容离边框的距离」。弄混这两者，样式调十遍也白搭。

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