如何彻底移除Safari中HTML表格的列分隔线？（border-collapse无效）

核心原因 #

这是Safari渲染引擎的精度问题：当单元格背景色与表格背景色不一致时，即便设置了border-collapse: collapse，也会因像素对齐误差透出表格背景，形成视觉上的细边框。

彻底解决方案 #

方案1：统一表格与单元格背景色 #

从根源消除透显可能，让<table>和<td>/<th>的背景色完全一致：

table {
  border-collapse: collapse;
  background-color: #你的单元格背景色; /* 与td/th保持一致 */
}
td, th {
  background-color: #你的单元格背景色;
}

该方案对桌面端和iOS Safari均有效。

方案2：用border-spacing: 0替代border-collapse #

若无法统一背景色，可改用border-spacing并隐藏表格边框，让单元格完全贴合：

table {
  border-spacing: 0;
  border: none;
}
td, th {
  border: none; /* 确保单元格本身无额外边框 */
}

方案3：iOS Safari专属渲染修复 #

添加硬件加速触发属性，修正Safari的渲染精度误差：

table {
  border-collapse: collapse;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

方案4：单元格边框覆盖间隙 #

若需保留部分边框，可给单元格设置与背景色一致的边框，覆盖透显线条：

table {
  border-collapse: collapse;
}
td, th {
  border: 1px solid #你的单元格背景色; /* 边框色与单元格背景匹配 */
}

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