如何用纯CSS解决Safari的colspan边框渲染Bug？

当表格设置border-collapse: collapse时，若存在带有colspan属性且无border的单元格，且该单元格同时相邻有边框和无边框的单元格，Safari会错误显示本不应存在的边框。目前可通过添加额外表格单元格来避免colspan跨越多状态单元格，但希望采用纯CSS方案解决，避免HTML结构冗余。

最简复现示例 #

CSS代码 #

body {
    background: white;
    color: black;
}
table {
    border: none;
    border-collapse: collapse;
}
td {
    border: 1px solid black;
}
td.empty {
    border: none;
}

HTML代码 #

<table>
  <tr>
    <td class="empty" colspan="2">Should be borderless, but has a bottom border</td>
  </tr>
  <tr>
    <td>Bordered</td>
    <td class="empty">Borderless</td>
  </tr>
</table>

已尝试的纯CSS方案（均无效） #

• 将td.empty的border设为背景色：虽能隐藏多余边框，但会同时隐藏相邻带边框单元格的边框
• 单独调整border-bottom、border-top属性：无效果
• 尝试overflow等其他属性：未解决问题

Bug影响范围 #

该Bug存在于Safari 16.3.1、16.4版本，涉及iOS、iPadOS、macOS平台；Chrome 111.x、112.x无此问题。

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