border-spacing是唯一符合HTML5标准、真正控制单元格物理间距的CSS属性，但仅在border-collapse: separate时生效；若为collapse则被规范强制忽略，且必须设在table元素上，单位仅支持px、rem等长度值，不可为负或百分比。
border-spacing 是唯一符合 HTML5 标准、能真正控制单元格之间物理间距的方式。写上就生效？不，90% 的失效都卡在 border-collapse 没设对。
为什么 border-spacing 写了没反应
最直接原因：浏览器压根没执行它。只要 border-collapse 的计算值是 collapse，border-spacing 就被规范强制忽略——DevTools 的 Computed 面板里可能标为 “invalid” 或根本不显示。
- 别信“默认就是
separate”，Bootstrap、Normalize.css 或项目全局样式常悄悄加了table { border-collapse: collapse; } - 必须显式写在
<table>元素上：style="border-collapse: separate; border-spacing: 6px;"，不能写在<td>或<tr>上 - 用 DevTools 的 “Computed” 面板确认真实值，不是看源码有没有写
- 第三方表格组件（如 Ant Design）默认用
collapse，需额外覆盖
border-spacing 两个参数谁管谁
顺序固定，不可颠倒：第一个值是**列间距**（水平方向，即相邻 <td> 左右边框之间的距离），第二个值是**行间距**（垂直方向，即相邻 <tr> 上下边框之间的距离）。
-
border-spacing: 8px→ 列距 8px，行距也是 8px -
border-spacing: 4px 12px→ 列距 4px，行距 12px（不是“上下 4px，左右 12px”） - 不支持
%、em、负值；单位只能是px、rem、vw等合法长度单位 - 它只作用于
<table>，写在<td>上完全无效，也**不会继承**
别用 padding 模拟单元格间距
padding 控制的是内容到单元格边框内侧的距离，不是单元格之间的空隙。混用会导致视觉和布局错乱：
立即学习“前端免费学习笔记（深入）”；
- 给
<td>加padding看起来像有间距，但单元格边框之间仍是紧贴的——背景色、阴影、父容器 border 都透不出来 - 表格总宽度不可控（
padding累加进单元格尺寸） - 在
border-collapse: collapse下，padding会让边框“浮起来”，交叠处出现视觉 bug - 想让文字离左边框远点 → 改
td { padding-left: 12px }；想让两列之间宽一点 → 只动table { border-spacing: 12px 0 }
复杂表格中 border-spacing 的边界行为
border-spacing 始终作用于“相邻单元格边框之间”，不是每个单元格都无条件加间隙：
- 带
colspan的单元格右侧没有相邻单元格，所以**不产生列间距**；但它下方仍按第二个值产生行间距 - 有
<colgroup>或<col>时，border-spacing不影响列宽计算逻辑——别指望它能“撑开”列宽 - 移动端小屏下过大的值（如
12px）易导致表格溢出视口，建议搭配overflow-x: auto或响应式断点重置 - IE8 及更早版本不支持
border-spacing，若必须兼容，只能退回到已废弃的cellspacing（并接受其不稳定行为）
真正容易被忽略的是：它只在 border-collapse: separate 下起效，且无法局部控制某行或某列——需要差异化间距时，得换思路：嵌套表格、display: grid 模拟，或接受语义妥协。
