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