border-spacing没反应最常见的原因是border-collapse被设为collapse，此时该属性被浏览器忽略；必须显式设置border-collapse:separate且作用于table元素，其第一个值控制列间距、第二个值控制行间距。

border-spacing 为什么设了没反应？

最常见的原因是 border-collapse 被设成了 collapse。这个值会让所有边框“焊死”在一起，border-spacing 直接被浏览器忽略——连 DevTools 的 computed 样式里都可能标为“invalid”。

• 必须显式写 border-collapse: separate，哪怕你只想要 1px 间距
• 检查全局 CSS 重置（比如 table { border-collapse: collapse; }），它会覆盖你的设置
• border-spacing 只作用于 <table> 元素，写在 <td> 或 <tr> 上完全无效
• 某些 UI 框架（如 Bootstrap）默认重置表格样式，需额外覆盖

border-spacing 的两个参数到底控制什么方向？

border-spacing 的第一个值是水平间距（列与列之间），第二个是垂直间距（行与行之间）。顺序不能反，CSS 规范明确约定如此。

• border-spacing: 8px → 列距和行距都是 8px
• border-spacing: 4px 12px → 列距 4px，行距 12px
• 不支持百分比或负值；单位必须是 px、em、rem 等合法长度
• 如果用 JavaScript 动态修改：table.style.borderSpacing = '6px 10px'

能不能用 padding 替代 border-spacing？

不能。给 <td> 加 padding 是调整内容到单元格边框的距离，不是单元格之间的空隙。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• padding 会让单元格实际变宽/变高，影响整表布局和响应式表现
• 当 border-collapse: collapse 时，padding 会导致边框视觉“浮起”，和相邻单元格错位
• border-spacing 产生的间隙是纯透明的，背景色、边框、阴影都能透出；padding 内部仍属单元格范围
• 想让表头和第一行数据“看起来”隔开？改 th 的 padding-bottom，别碰 border-spacing

复杂表格（含 colspan/rowspan）下 border-spacing 还可靠吗？

语法上仍然生效，但视觉效果容易误判：跨行/跨列单元格右侧或下方的间隙位置可能不符合直觉。

立即学习“前端免费学习笔记（深入）”；

• 例如一个 colspan="2" 的 <th>，它右边不会出现“列间距”，但其下方与普通 <td> 之间仍有垂直间距
• 间隙始终出现在“相邻单元格边框之间”，不是“相邻单元格内容之间”——这是理解错位的关键
• 如果需要精确对齐，建议避免混合使用 colspan/rowspan 和非对称 border-spacing（如 4px 12px）
• IE8+ 和所有现代浏览器均支持，但旧版 IE（≤7）不支持，此时只能退回到废弃的 cellspacing 属性

真正麻烦的不是写法，而是判断「这里要的到底是单元格之间的空隙，还是内容离边框的距离」——弄混这两者，再调十遍样式也白搭。