border-spacing失效主因是border-collapse被设为collapse，必须显式声明separate；细边框依赖border-spacing控制单元格外侧间隙，padding控制内容内侧距离，二者不可混淆。
border-spacing写了没反应，先查border-collapse是否为separate
细边框效果常依赖border-collapse: separate + border-spacing组合，但90%的失效都卡在border-collapse被设成collapse。这个值一出现，border-spacing直接被浏览器忽略——DevTools里可能标为“invalid”，源码写了也白写。
必须显式写：table { border-collapse: separate; }，哪怕你没动过它，也别信“默认就是separate”。Bootstrap、Normalize.css、甚至某行全局table { border-collapse: collapse; }都可能悄悄覆盖。
用 DevTools 的 “Computed” 面板确认border-collapse真实值，不是看源码有没有写，而是看最终计算结果。
细边框 ≠ 小border-width，关键在border-spacing与border组合
只把border设成1px solid #ddd不够，容易出现双线或间隙错位。真正做细边框，要配合border-spacing控制物理间距，让边框“呼吸”而不粘连。
-
border-spacing: 1px→ 列距和行距都是1px，适合极简细线表 -
border-spacing: 0 1px→ 水平无缝，垂直留1px空隙（常用于表头与数据行之间） - 边框颜色建议用浅灰（如
#e0e0e0），比纯黑更显“细”
注意：border-spacing单位只能是px、rem、vw等长度值，%、em、负值全无效。
给td加padding不是调间距，是调内容离边框距离
想让文字不贴着边框？改td, th { padding: 6px 12px; }。这不是在调单元格间距，而是在控制内容到单元格边框内侧的距离。
border-spacing控制的是「单元格边框外侧」的透明间隙，背景色、父容器边框都能透出；padding控制的是「内容到边框内侧」，它会让单元格实际变宽变高，影响整表布局。
常见错误：
- 给
<td>加<code>margin→ 完全无效，表格单元格不支持margin - 用
padding模拟border-spacing→ 表格总宽失控，响应式错位，边框视觉“浮起” - 混用
cellspacing属性（如<table cellspacing="2">）→ 会覆盖CSS的<code>border-spacing，现代项目应全部移除圆角细边框必须用separate模式
如果还要加
border-radius（比如table { border-radius: 4px; overflow: hidden; }），border-collapse: separate是硬性前提。collapse模式下border-radius无法生效，或者只作用于table外框，内部单元格仍方正。此时
border-spacing还能用，但要注意：- 第一行
<th>和第一列<code><td>的圆角衔接处，需肉眼校验间隙是否均匀 <li>含<code>colspan/rowspan时，跨格单元格右侧/下方的间隙位置可能偏移，不是bug，是规范行为 - 若框架强制
collapse（如某些UI库表格组件），就别硬刚border-spacing，改用outline+padding模拟视觉间隙
真正麻烦的不是怎么写，而是分清你要的到底是「单元格之间的空隙」还是「内容离边框的距离」——弄混这两者，样式越调越乱。
- 第一行
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
