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>