border-spacing 没生效是因为默认 border-collapse: collapse 会忽略该属性，必须显式设置 border-collapse: separate 才能生效，且需作用于 table 元素。
border-spacing 在 table 上为什么没生效
因为 border-spacing 只对 border-collapse: separate 的表格起作用，而现代浏览器默认是 border-collapse: collapse。一旦设成 collapse，border-spacing 就完全被忽略——连 DevTools 里都可能显示为“无效属性”。
- 必须显式写
border-collapse: separate，哪怕只是想调一个像素的间距 - 这个设置要加在
<table>元素上，不能只加在<td>或<th> - 如果用了
display: grid或display: flex模拟表格，border-spacing压根不适用
border-spacing 的两个值分别控制什么方向
border-spacing 接受一个或两个长度值：第一个是水平间距（列之间），第二个是垂直间距（行之间）。只写一个值时，两个方向都用它。
-
border-spacing: 8px→ 列距 8px，行距也是 8px -
border-spacing: 4px 12px→ 列距 4px，行距 12px（注意顺序：先横后竖） - 单位支持
px、em、rem，但不支持百分比 - 负值无效，会被浏览器忽略
和 padding、margin 混用时容易踩的坑
border-spacing 是表格特有的“格子间隙”，它和单元格内部的 padding、外部的 margin 不同层，但视觉上会叠加。常见误判是把内容撑开当成“间距变大”，其实是 padding 在起作用。
-
border-spacing产生的空白区域没有背景色、边框、内边距——纯透明间隙 - 如果给
<td>加了padding，内容离边框的距离是 padding；而相邻单元格之间的距离才是border-spacing -
margin对<td>和<th>完全无效（表格单元格不响应 margin） - 想让第一行表头和下面数据行之间“看起来”空一点？别动
border-spacing，改th的padding-bottom更可控
兼容性与替代方案（IE8+ 都支持，但要注意 display
border-spacing 在 IE8+、所有现代浏览器中都稳定支持，但它依赖于表格的真实渲染模式。如果你用 display: table 系列模拟表格结构，同样可以使用，但前提是父容器必须是 display: table，且不能是 inline-table 或其他变形。
立即学习“前端免费学习笔记（深入）”；
- Flex/Grid 布局下无法用
border-spacing—— 没有“表格上下文” - 需要兼容极老版本（IE7 及以下）？只能用
cellspacing属性（HTML 属性，非 CSS），但已废弃且语义差 - 真正麻烦的是混合了
colspan/rowspan的复杂表格：border-spacing依然生效，但间隙位置可能不如预期直观——尤其是跨行单元格右侧/下方的间隙会“错位”
border-collapse: separate。别的都能试出来，这句不写，整个属性就静默失效。 
