border-spacing不生效最常见原因是border-collapse被设为collapse，此时该属性被浏览器强制忽略；必须显式设置table{border-collapse:separate}并确认computed值，且仅作用于table元素，第一个值控制列间距、第二个值控制行间距。

border-spacing 写了没反应，基本是因为 border-collapse 被设成了 collapse —— 这个值一出现，浏览器直接跳过解析，border-spacing 彻底失效。

为什么 border-spacing 不生效？

最常踩的坑是：以为默认就是 separate，结果全局 CSS 重置、Bootstrap 的 .table 类、甚至某行 table { border-collapse: collapse; } 已经悄悄覆盖了你的设置。

• 必须显式写 table { border-collapse: separate; }，哪怕只想要 1px 间距
• 在 DevTools 的 “Computed” 面板里确认 border-collapse 真实值是 separate，别只看源码有没有写
• border-spacing 只作用于 <table> 元素，写在 <code><td> 或 <code><tr> 上完全无效 <li>如果 <code>table 被设成 display: grid 或 display: block，它已脱离表格渲染上下文，border-spacing 失效

border-spacing 的两个参数到底控制什么？

顺序固定，不可颠倒：第一个值是列间距（水平方向，相邻 <td> 左右边框之间），第二个值是行间距（垂直方向，相邻 <code><tr> 上下边框之间）。 <ul> <li> <code>border-spacing: 8px → 列距和行距都是 8px

• border-spacing: 4px 12px → 列距 4px，行距 12px（不是“上下 4px，左右 12px”）
• 单位只支持 px、rem、vw 等合法长度值；%、em、负值均被忽略
• 不继承，也不能用 JavaScript 通过 td.style.borderSpacing 设置——必须操作 table 元素

和 padding 混用时为啥视觉错乱？

border-spacing 控制的是「单元格边框外侧」的透明间隙，padding 控制的是「内容到单元格边框内侧」的距离，两者层级和作用域完全不同。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 想让两列之间宽一点 → 改 table { border-spacing: 12px 0 }
• 想让文字离边框远点 → 改 td, th { padding: 8px }
• 给 <td> 加 <code>margin 是白忙活，表格单元格不支持 margin
• 用 padding 模拟 border-spacing 会导致表格总宽度不可控，尤其在响应式场景下容易溢出

必须保留 border-collapse: collapse 时怎么办？

如果框架强制用了 collapse（比如 Ant Design 表格），又没法改，就放弃物理间隙，转为视觉模拟：

• 给 <td> 加 <code>padding，再配细边框：border: 1px solid transparent
• 用 outline 替代 border，因为 outline 不占布局空间，配合 padding 更易控距
• 复杂表格含 colspan/rowspan 时，border-spacing 仍生效，但跨格单元格右侧/下方的间隙位置可能偏移，得肉眼校验

真正麻烦的不是怎么写，而是分清你要的到底是「单元格之间的空隙」，还是「内容离边框的距离」——弄混这两者，样式调十遍也白搭。

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