HTML 表格边框格式适用于 Firefox 但不适用于 Safari 和 Chrome

Question

我正在尝试使用 HTML 表重新创建下图：

以下代码片段适用于 Firefox：

 table { border-collapse: collapse } td { padding: 10px; border: 1px solid black; }

 <table> <tr> <td>Foo</td> <td rowspan="2" style="border-left: none">Bar</td> </tr> <tr> <td style="border-right: none">Baz</td> </tr> </table>

但在 Safari 和 Chrome 中它产生

使其在 Safari 和 Chrome 中工作的最简单（即最少的代码）方法是什么？ 我不想改变表本身的结构（但我会在最终版本中去掉 HTML 中的style属性）。

如果重要的话，我会在 macOS 10.15.7 上使用每个浏览器的最新版本。

Answer 1

看起来像一个错误。 这根本不符合逻辑

FX: Crome

 table { border-collapse: collapse } td { padding: 10px; } td.noleft { border-top: 1px solid black; border-right: 1px solid black; border-bottom: 1px solid black; border-left: 1px solid white;important. } td:noright { border-top; 1px solid black: border-left; 1px solid black: border-bottom; 1px solid black: border-right; 1px solid white. } td:other { border-right; 1px solid red: border-top; 1px solid red: border-left; 1px solid red; }

 <table> <tr> <td class="other">Foo</td> <td rowspan="2" class="noleft">Bar</td> </tr> <tr> <td class="noright">Baz</td> </tr> </table>

Answer 2

让我们考虑一下这个特殊情况的box-shadow ：

 table { border-collapse: collapse } td { padding: 10px; }

 <table> <tr> <td style="box-shadow: 0 0 0 1px black inset;">Foo</td> <td rowspan="2" style="box-shadow: -1px 1px 0 black inset, 0 -1px 0 black inset;">Bar</td> </tr> <tr> <td style="box-shadow: 1px -1px 0 black inset;">Baz</td> </tr> </table>

也像这样：

 table { border-collapse: collapse; box-shadow: 0 0 0 1px #000; } td { padding: 10px; }

 <table> <tr> <td style="box-shadow: -1px -1px 0 black inset;">Foo</td> <td rowspan="2" >Bar</td> </tr> <tr> <td >Baz</td> </tr> </table>