为什么 `border-collapse:collapse` 会导致相邻单元格在未绘制时具有上边框

Question

我有以下 HTML:

<table style="table-layout: fixed;width: 768px;border-collapse: collapse !important;">
<thead>
    <tr>
        <th colspan="2"></th>
    </tr>
</thead>
<tbody>
<tr>
  <th 
    colspan="1" 
    style="border-right: 1px solid black; border-top: 1px solid black;">abc</th><th colspan="20">
  </th>
</tr>
</tbody>
</table>

(这里可以是运行https://jsfiddle.net/vchelaru/nhxye9mj/11/)

在Chrome(79.0.3945.117)中，上边框向右延伸到border-top: 10x solid black;行之外，如下图所示：

Firefox 和 IE 按我的预期呈现 table：

请注意，如果我删除 border-collapse: collapse 样式，边框不会向右延伸到第一列之外，但我需要折叠边框。

我该如何解决这个问题？

Answer 1

更改 table 的第一行以明确列出列数而不是带有 colspan 的单列似乎可以解决问题：

<table style="table-layout: fixed;width: 768px;border-collapse: collapse !important;">
<thead>
    <tr>
        <th/><th/>
    </tr>
</thead>
...

为什么 `border-collapse:collapse` 会导致相邻单元格在未绘制时具有上边框

Why does `border-collapse:collapse` cause adjacent cells to have a top border when one isn't drawn

html

google-chrome

html-table

border