border-spacing不生效的首要原因是border-collapse被设为collapse，必须显式设置table{border-collapse:separate}并确认computed值，它仅作用于table元素，第一值控列距、第二值控行距。
border-spacing不生效？先查border-collapse是否被悄悄覆盖
绝大多数时候不是代码写错了，而是border-spacing被浏览器直接忽略——因为table的border-collapse值实际是collapse。这个值一出现，border-spacing就彻底失效，连警告都不会抛。
必须显式声明：table { border-collapse: separate; }，哪怕你只想要1px间距。别依赖“默认值”，全局重置、UI框架（如Bootstrap的.table）、甚至某处CSS里一句table { border-collapse: collapse; }都可能把它覆盖掉。
验证方法：打开DevTools，在Computed面板里确认border-collapse的真实计算值是separate，而不是只看源码有没有写。
常见干扰项：
-
table被设为display: grid或display: block→ 已脱离表格渲染上下文，border-spacing无效 -
border-spacing写在td或tr上 → 完全不生效，它只作用于table元素 - 用了
%、em或负值 →border-spacing只接受px、rem、vw等长度单位，其他一律被忽略
border-spacing两个参数到底控制什么方向
border-spacing的顺序是固定的：第一个值是列间距（水平方向，相邻td左右边框之间），第二个值是行间距（垂直方向，相邻tr上下边框之间）。不是“上下/左右”，也不是“宽/高”。
例如：
-
border-spacing: 8px→ 列距和行距都是8px -
border-spacing: 4px 12px→ 列距4px，行距12px
注意：border-spacing影响的是整个表格的单元格网格间距，无法单独给某一行或某一列设置。如果需要局部调整，只能靠padding + 视觉模拟，或者重构结构。
另外：border-spacing不继承，也不能用JavaScript通过td.style.borderSpacing设置——必须操作table元素本身。
padding和border-spacing混用时的视觉分层逻辑
border-spacing控制的是「单元格边框外侧」的透明间隙，padding控制的是「内容到单元格边框内侧」的距离。它们不在同一层，也不互相干扰。
所以：
- 想让两列之间空一点 → 改
table { border-spacing: 12px 0 } - 想让文字离边框远一点 → 改
td, th { padding: 8px } - 给
td加margin→ 白忙活，表格单元格不支持margin
容易踩坑的是用padding硬凑“间距感”：比如把padding设得很大来模拟border-spacing，会导致表格总宽度失控，尤其在响应式场景下容易横向溢出。真要留白，优先动border-spacing。
移动端小屏下，padding值不宜过大；建议配合min-width或word-break: break-word防溢出。另外padding百分比值以父容器宽度为基准，不是高度——写padding-top: 5%却发现留白过大？那是预期行为，不是bug。
必须用border-collapse: collapse时怎么保“呼吸感”
有些UI框架（如Ant Design）强制使用border-collapse: collapse，此时border-spacing完全失效，单元格边框会“挤在一起”。这时真正能控制视觉“间距感”的只剩两个东西：padding和border-width。
推荐做法：
- 给
td, th加合理padding（比如12px 16px），这是内容可读性的基础 - 配细边框：
border: 1px solid transparent，既保留边框语义，又不增加视觉压迫 - 慎用
outline替代border，因为它不占布局空间，但可能影响焦点管理
复杂表格含colspan/rowspan时，border-spacing仍生效，但跨格单元格右侧/下方的间隙位置可能偏移，得肉眼校验。而collapse模式下这种偏移更隐蔽，调试成本更高。
真实项目中，90%的现代表格布局应优先选border-collapse: separate + border-spacing组合。只有在需要极致紧凑边框（如数据密集型后台列表）时，才考虑collapse，并接受它带来的间距控制限制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
