Google Chrome表格border-collapse属性CSS渲染异常问题及解决方案问询

架构老林

2026-10-2

问题原因

该问题是Chrome 115及后续版本已知的渲染bug，源于Chrome团队优化表格合并边框渲染逻辑时引入的浮点像素计算精度缺陷。当页面存在缩放、表格/单元格宽高或边框宽度计算后为非整数像素值时，border-collapse: collapse模式下的边框对齐逻辑会失效，进而出现边框间隙、异常加粗的表现，旧版Chrome未调整该渲染逻辑所以不会触发。

可行临时解决方案

方案一（改造成本最低）：给table元素添加GPU渲染触发属性，规避CPU渲染路径的精度问题

table {
  transform: translateZ(0);
  /* 或者用 will-change: transform; 效果一致 */
}

该方案无需改动原有边框逻辑，适合不想调整现有样式的场景，仅在Chrome存在该bug的版本生效，不影响其他浏览器表现。

方案二（兼容性最好，完全规避bug）：将border-collapse: collapse替换为separate模式，手动实现合并边框效果

table{
  font-family:tahoma;
  font-size:20px;
  width:100%;
  /* 替换原来的border-collapse: collapse */
  border-collapse: separate;
  border-spacing: 0;
  background:white;
}
/* 补充单元格边框规则 */
td, th {
  border-right: 1px solid #你的边框颜色;
  border-bottom: 1px solid #你的边框颜色;
}
tr:first-child td, tr:first-child th {
  border-top: 1px solid #你的边框颜色;
}
td:first-child, th:first-child {
  border-left: 1px solid #你的边框颜色;
}

该方案完全绕开了border-collapse: collapse的bug，所有浏览器表现一致，没有兼容性问题。