HTML 表格边框格式在 Firefox 中有效，但在 Safari 和 Chrome 中无效答案

【问题标题】：HTML table border formatting works in Firefox but not in Safari and ChromeHTML 表格边框格式在 Firefox 中有效，但在 Safari 和 Chrome 中无效
【发布时间】：2021-03-12 10:29:20
【问题描述】：

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

以下 sn-p 在 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 上使用每个浏览器的最新版本。

【问题讨论】：

看起来像一个错误...

标签： html css html-table border

【解决方案1】：

让我们考虑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>

【讨论】：

【解决方案2】：

看起来像一个错误。这没有意义

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>

【讨论】：