border-spacing没反应最常见原因是border-collapse被设为collapse，必须显式设置table{border-collapse:separate}，且仅对table元素有效，单位只支持px、rem等长度值。
border-spacing 为什么写了没反应
最常见原因是 border-collapse: collapse 覆盖了它。这个声明会让浏览器直接忽略 border-spacing，哪怕你写在 <table> 的 style 里，DevTools 的 Computed 面板里也会标成 “invalid” 或不显示值。
<p>检查点包括：</p>
<ul>
<li>全局 CSS 重置（如 Normalize.<a style="color:#f60; text-decoration:underline;" title="css" href="https://m.php.cn/zt/15716.html" target="_blank">css</a>、Bootstrap）常带 <code>table { border-collapse: collapse; }
collapse，需手动覆盖display: grid 或 display: flex 包裹了 <table>，破坏表格渲染上下文
<li>写了 <code>cellspacing="10" 这类 HTML 属性，它会优先于 CSS 的 border-spacing 生效正确设置 border-spacing 的三要素
必须同时满足三个条件，border-spacing 才能真正起作用：
- 作用对象只能是
<table> 元素本身，写在 <code><td> 或 <code><tr> 上无效 <li>显式声明 <code>border-collapse: separate（不能依赖“默认值”，得写出来） - 单位必须是长度值：
px、rem、vw等；不支持%、em、auto或负值
示例写法：
table {
border-collapse: separate;
border-spacing: 6px 12px;
}
注意顺序：第一个值是列间距（水平），第二个是行间距（垂直），不是“行列”也不是“上下左右”。
cellpadding 怎么用 padding 替代
cellpadding 控制的是内容到单元格边框的距离，对应的是 td 和 th 的 padding，不是 border-spacing 的职责。
-
cellpadding="0"→ 必须写td, th { padding: 0; }，仅靠border-collapse: collapse不够 - 不同单元格需要不同内边距？
padding支持选择器细分，比如td:first-child { padding-left: 0; } - 加
margin到td上完全无效——表格单元格的display类型决定了它不响应margin
常见错误：用 padding 模拟 border-spacing，会导致表格总宽度失控、边框视觉浮起、响应式错位。
当 border-collapse: collapse 必须保留时怎么办
有些场景下你无法改用 separate，比如要实现无间隙的连续边框线，或兼容某些 UI 库的强制样式。这时 border-spacing 彻底失效，只能退回到单元格自身控制留白：
- 清除默认内边距：
td, th { padding: 0; } - 按需恢复呼吸感：
td { padding: 8px 12px; } - 想模拟“间隙感”但又不能动边框？可用
outline或伪元素::after在单元格右/下侧画细线，避开边框合并逻辑 - 别碰
font-size: 0清空白字符那套——只对 inline-block 表格有效，现代布局中极易引发字体继承混乱
真正稳定的控制从来不是单点修改，而是把 border-collapse、border-spacing、padding 当作一组联动参数来调。漏掉任意一个，都可能让页面在某个浏览器或某次构建后突然多出 1px 缝隙。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
