为什么`border-collapse：collapse`会导致相邻单元格在未绘制时具有顶部边框答案

【问题标题】：Why does `border-collapse:collapse` cause adjacent cells to have a top border when one isn't drawn为什么`border-collapse：collapse`会导致相邻单元格在未绘制时具有顶部边框
【发布时间】：2020-05-02 16:28:04
【问题描述】：

我有以下 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 按我的预期呈现表格：

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

我该如何解决这个问题？

【问题讨论】：

标签： html google-chrome html-table border

【解决方案1】：

更改表格的第一行以显式列出列数而不是带有 colspan 的单列似乎可以解决问题：

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

【讨论】：