border-spacing 失效的根本原因是 border-collapse 被设为 collapse，必须显式声明 border-collapse: separate 才生效；它只适用于 table 元素，取值仅支持非负长度单位，单值为行列同距，双值顺序为水平/垂直，不可用 margin 替代。

border-spacing 在不同浏览器中表现不一致，根本原因不是浏览器差异，而是 border-collapse 的默认值被隐式覆盖或未显式声明 —— 现代项目里，border-spacing 失效几乎全因它被 border-collapse: collapse “静默屏蔽”了。

为什么 border-spacing 设置了却没效果

浏览器对 <table> 元素的 <code>border-collapse 默认值确实是 separate，但以下情况会实际覆盖它：

• 第三方 CSS 框架（如 Bootstrap 4+ 的 .table 类）默认加了 border-collapse: collapse
• 全局重置样式表（如 normalize.css、modern-normalize）可能统一设为 collapse
• 父级 <table> 上有内联样式或更高优先级规则强制 <code>collapse

  此时哪怕你写了 border-spacing: 10px，DevTools 里也会显示该属性“已禁用”或“无效”，因为规范明确：当 border-collapse 为 collapse 时，border-spacing 被完全忽略，不参与计算，也不继承。

  必须显式写 border-collapse: separate

  不能依赖“默认值”，必须在应用 border-spacing 的同一选择器里，同时声明 border-collapse: separate：

  

  page-agent 浏览器控制（CDP）

  使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。

  下载

  table {
    border-collapse: separate;
    border-spacing: 8px 4px;
  }

  注意两点：

  • 顺序无关紧要，但两个声明必须共存；只写 border-spacing 不写 border-collapse: separate 就等于没写
  • 该规则必须作用于 <table> 元素本身，或 <code>display: table 的容器，不能只加在 <td> 或 <code><th> 上 <li>若使用 <code>display: grid 或 display: flex 模拟表格布局，border-spacing 完全不适用 —— 那时候该用 gap

  border-spacing 的单位和取值限制

  border-spacing 只接受长度值，且有硬性约束：

  • 支持 px、rem、vw 等绝对或视口单位；不支持 %、em（尽管部分浏览器能解析 em，但属非标准行为，不应依赖）
  • 不允许负值，写成 border-spacing: -2px 会被浏览器直接丢弃
  • 单值语法 border-spacing: 6px 表示水平与垂直均为 6px；双值语法 border-spacing: 4px 12px 中，**第一个是水平（列间），第二个是垂直（行间）**，顺序不可颠倒

  和 padding、margin 的关键区别

  很多人试图用 margin 给 <td> 加间隙，结果无效 —— 因为表格单元格不参与常规文档流，<code>margin 对 <td> 和 <code><th> 完全不起作用。 <ul> <li> <code>border-spacing 控制的是「单元格边框外侧」的空白，即相邻单元格之间的物理空隙

  • padding 控制的是单元格内容到自身边框的距离，属于内部空间，写在 <td> 或 <code><th> 上才有效 <li>二者作用域不同：一个管“单元格之间”，一个管“内容与边框之间”，不能互相替代</li> <p>真正容易被忽略的点是：即使你把 <code>border-spacing 写对了，只要父级 <table> 被任何一层 CSS 规则设成了 <code>collapse，它就彻底失效 —— 这种问题不会报错，也不会警告，只能靠检查 computed styles 里的 border-collapse 值来定位。

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