border-spacing生效的前提是table元素显式设置border-collapse: separate，否则被规范强制忽略；其第一个值控制列间距（水平），第二个值控制行间距（垂直），仅作用于table且不支持百分比、em或负值。
border-spacing 是唯一符合 HTML5 标准、真正控制单元格物理间距的 CSS 属性，但它写上不等于生效——90% 的失效都卡在 border-collapse 没配对。
为什么 border-spacing 写了没反应
浏览器直接忽略它，因为 border-spacing 只在 border-collapse: separate 时才起作用；只要计算值是 collapse（包括默认值、Bootstrap、Normalize.css 或某行全局 table { border-collapse: collapse; }），该属性就被规范强制禁用。
- 必须显式给
<table> 元素设置 <code>border-collapse: separate，写在<td> 或 <code><tr> 上无效 <li>用 DevTools 的 “Computed” 面板确认真实值，别只看源码有没有写</li> <li>Ant Design、Element Plus 等 UI 库的表格组件默认用 <code>collapse，需额外覆盖：例如table.my-table { border-collapse: separate !important; border-spacing: 8px 4px; } -
border-spacing: 4px 12px→ 列距 4px，行距 12px（不是“上下 4px，左右 12px”） - 不支持
%、em、负值；单位只能是px、rem、vw等合法长度单位 - 只作用于
<table>，写在 <code><td> 上完全无效，也不继承 <h3> <code>border-spacing和padding混用时视觉错乱怎么办border-spacing控制的是「单元格边框外侧」的透明间隙，padding控制的是「内容到单元格边框内侧」的距离，二者作用域完全不同；margin对<td> 和 <code><th> 完全无效。 <ul> <li>想让文字离边框远点 → 改 <code>td, th { padding: 8px } - 想让两列之间宽一点 → 改
table { border-spacing: 12px 0 } - 给
<td> 加 <code>margin是白忙活，浏览器会忽略 - 用
padding模拟border-spacing会导致表格总宽失控、边框“浮起”、响应式错位 - 给
td设padding，同时设border: 1px solid transparent—— 这样 padding 有空间，透明边框又不会破坏 collapse 合并 - 若需“视觉间隙”，可让相邻单元格用不同背景色 + 小 padding，靠色差制造分离感
- 避免给所有
td加大padding后再加border-spacing，否则列宽会爆炸式增长，尤其在小屏幕下溢出
border-spacing 两个参数谁管水平谁管垂直
顺序固定不可颠倒：第一个值是列间距（相邻 <td> 左右边框之间的距离），第二个值是行间距（相邻 <code><tr> 上下边框之间的距离）。
<ul>
<li>
<code>border-spacing: 8px → 列距 8px，行距也是 8px
必须保留 border-collapse: collapse 时怎么模拟间隙
不能用 border-spacing，但可以用 padding + 边框技巧“伪造”间隙感，关键在于控制边框渲染逻辑：
最易被忽略的点：border-spacing 不是“看起来有空隙”，而是真实插入物理间隙——父容器背景、阴影、border 都能透出。一旦忘记显式声明 border-collapse: separate，连这个“透出”效果都会消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
