border-spacing写了没反应，是因为border-collapse计算值为collapse时该属性被规范强制忽略；必须显式设table{border-collapse:separate}，且仅作用于元素，第一个值控列间距、第二个值控行间距，单位限非负长度值。
border-spacing写了没反应？先看border-collapse是不是separate
90% 的 border-spacing 失效，是因为浏览器压根没执行它——只要 border-collapse 的计算值是 collapse，该属性就被 HTML5 规范强制忽略。
常见干扰源包括：Bootstrap 默认重置、Normalize.css、全局 table { border-collapse: collapse; }，甚至某些 UI 库（如 Ant Design）的表格组件也默认启用 collapse。
- 必须显式给
<table> 元素设置 <code>border-collapse: separate（不能写在<td> 或 <code><tr> 上） <li>用 DevTools 的 “Computed” 面板确认真实值，别只看源码有没有写</li> <li>若用 CSS 类覆盖，建议加 <code>!important：例如table.my-table { border-collapse: separate !important; border-spacing: 6px 2px; } -
border-spacing: 4px 12px→ 列距 4px，行距 12px（不是“上下 4px，左右 12px”） - 不支持
%、em、负值；单位只能是px、rem、vw等合法长度单位 - 只对
<table> 生效，写在 <code><td> 上完全无效，也不继承 <h3>为什么padding不能替代border-spacing</h3> <p><code>padding控制的是内容到单元格边框**内侧**的距离，而border-spacing控制的是单元格边框**外侧**的真实物理间隙——二者作用域完全不同。- 用
padding模拟间距会导致表格总宽度不可控（padding 累加进每个单元格尺寸） - 在
border-collapse: collapse下，padding会让边框“浮起”，视觉错位 - 无法透出父容器背景或边框，达不到真正“留白”的效果
-
margin对<td> 和 <code><th> 完全无效（由 display 类型决定） <h3>需要不等距或兼容 IE8 怎么办</h3> <p><code>border-spacing是表格级统一设置，无法单独指定某行或某列的间距。真要实现“视觉不等距”，只有绕过方案：- 嵌套表格：外层控制整体
border-spacing，内层设border-collapse: collapse且无间距 - 改用
display: grid或flex模拟表格结构，获得完全控制权（语义和可访问性需额外处理） - IE8 及更早版本不支持
border-spacing，只能退回到废弃的cellspacing属性（行为不稳定，不同引擎表现不一致） - 移动端要注意：大间距（如
12px）易导致表格溢出视口，建议搭配overflow-x: auto或响应式断点重置
真正容易被忽略的是：
<colgroup></colgroup>和<col>不影响border-spacing的行为——它不会“撑开”列宽，仅插入透明间隙。 - 嵌套表格：外层控制整体
- 用
border-spacing两个参数谁管列距、谁管行距
border-spacing 的顺序是固定的：第一个值是**列间距**（水平方向，即相邻 <td> 左右边框之间的距离），第二个值是**行间距**（垂直方向，即相邻 <code><tr> 上下边框之间的距离）。
<ul>
<li>
<code>border-spacing: 8px → 列距 8px，行距也是 8px
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
