设置border-spacing:0仍有边框间隙是否需设border-collapse:collapse？

想要彻底消除表格边框、单元格之间的空隙，并非必须将border-collapse属性设置为collapse，但将border-spacing设为0px后依然存在的极细漏底缝隙，恰好是border-collapse: separate（表格默认渲染模式）的固有特性导致的。

当表格运行在separate边框模式下时，浏览器会独立计算每个单元格的边框、背景渲染边界，哪怕单元格间距设为0，布局计算过程中产生的亚像素舍入误差，依然会在单元格邻接位置留出宽度不足1px的缝隙：

• 这类缝隙通常在表格总宽度不是单元格宽度、边框宽度整数倍，或是页面存在缩放、使用非整数像素单位时出现，会直接透出表格父级的背景色。
• 尝试给单元格加边框遮盖缝隙无效的原因是，边框属于单元格自身的渲染内容，绘制范围不会超出单元格的计算边界，自然盖不到边界外的间隙。

针对无法修改平台基础样式表的场景，可按需选择以下方案：

• 最彻底的方案：直接给表格设置border-collapse: collapse。该模式下浏览器会合并相邻单元格的边框，从渲染逻辑上取消单元格之间的独立网格间隙，从根源上避免漏底问题。注意设置该属性后，border-spacing会自动失效，无需额外调整。
• 兼容冲突场景的方案：如果原有站点样式导致collapse模式布局错乱，可以给单元格设置和自身背景同色的外轮廓补缝，代码为outline: 1px solid 对应背景色; outline-offset: -1px;。轮廓绘制在元素边框外侧，不会挤占布局空间，刚好能盖住亚像素级的缝隙。
• 最简单的视觉修复方案：直接给表格元素设置和单元格一致的背景色，就算存在缝隙，透出的也是和单元格同色的背景，视觉上完全看不出异常。

内容的提问来源于stack exchange，提问作者Azariah Box