border-spacing是唯一能真正控制单元格间水平间距的CSS属性，但仅在border-collapse: separate时生效；90%失效源于collapse模式被隐式设置，必须显式作用于table元素并用Computed面板确认真实值。
border-spacing 是唯一能真正控制单元格之间水平间距的 CSS 属性，但它只在 border-collapse: separate 时生效——90% 的失效都卡在这一步。
为什么 border-spacing 设了水平值却没反应
浏览器直接忽略该声明，根本原因是 border-collapse 计算值为 collapse。哪怕你没写这行 CSS，Bootstrap、Ant Design 或某处全局样式可能已悄悄设为 collapse。
- 必须显式给
<table>元素加border-collapse: separate - 不能写在
<td>或<tr>上，也不继承 - 用 DevTools 的 “Computed” 面板确认真实值，别只看源码有没有写
- 第三方表格组件（如 Element Plus）默认启用
collapse，需额外覆盖
border-spacing 的第一个参数到底管什么
它只管列间距（即相邻 <td> 左右边框之间的距离），不是“左右间距”或“上下间距”，顺序固定不可颠倒。
-
border-spacing: 12px→ 列距 12px，行距也 12px -
border-spacing: 16px 4px→ 列距 16px，行距 4px（不是反过来） - 不支持
%、em、负值；单位只能是px、rem、vw等长度值 - 想让某几列更宽？
border-spacing不支持差异化设置，得用colgroup+width或 flex 替代方案
当必须保留 border-collapse: collapse 时怎么加水平留白
此时 border-spacing 完全无效，唯一可靠方式是给单元格内容加 padding，但注意这不是“单元格间距”，而是内容到边框的距离。
立即学习“前端免费学习笔记（深入）”；
-
td, th { padding-left: 12px; padding-right: 12px; }—— 实际影响视觉疏密感 - 给
<td>加margin没用，表格单元格的 display 类型不支持外边距 - 用空格字符或
- 若需精确对齐（比如数字右对齐+左侧留白），建议用
text-align: right+padding-left组合
最容易被忽略的是：水平间距 ≠ 内容对齐。真要控制文字离左边框多远，改 padding-left；真要拉开两列之间的物理空隙，必须确保 border-collapse: separate 且 border-spacing 作用于 <table> —— 这两个条件缺一不可。
