HTML表格设置border-collapse后缩放时行边框显示不均问题

这是浏览器做亚像素对齐时的正常渲染表现，和自定义CSS没有关系。
设置border-collapse: collapse后，相邻单元格、相邻行的边框会合并为一条，本质是上下/左右两个元素的边框叠在同一个位置共同渲染。当页面处于非100%缩放级别，或者表格尺寸计算出现小数像素值时，浏览器会把边框位置舍入对齐到设备物理像素，这个过程中如果边框位置落在两个物理像素的中间，浏览器会自动加抗锯齿效果：部分位置两层边框的抗锯齿效果叠加，视觉上就会更粗更黑；部分位置舍入后产生微小偏移，就会显得边框颜色更浅。缩放级别变化时，像素舍入的计算结果会变，显示异常的边框位置自然也会跟着变。
这个表现是主流浏览器共有的已知渲染特性，哪怕是官方文档的示例页面也会复现，不是代码写法错误。

• 优先推荐改用分离边框模式手动控制边框，从根源避免叠层渲染问题，全缩放级别下表现最稳定：

table {
  border-collapse: separate;
  border-spacing: 0;
  border-top: 1px solid black;
  border-left: 1px solid black;
}
th, td {
  border: 1px solid black;
  border-top: none;
  border-left: none;
}

实现逻辑很简单：取消边框合并、把单元格间距设为0，然后隐藏每个单元格的上边框和左边框，只给表格整体补最外层的上、左边框，最终视觉效果和合并边框完全一致，且所有边框都是单元素独立渲染，不会出现叠层导致的粗细不均。

• 如果必须保留border-collapse: collapse属性，可以把边框宽度设为略小于1px的值，比如border: 0.95px solid black，引导浏览器渲染时把边框对齐到单个物理像素，减少抗锯齿叠加的概率。缺点是部分低DPI屏幕下可能出现边框发虚的情况，兼容性一般。
• 临时hack方案：给表格设置transform: translateZ(0)触发GPU加速渲染，部分场景下可以让浏览器统一像素舍入逻辑，缓解边框不均的问题，但不能保证100%生效。

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