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

Posted 2023-03-05

【中文标题】为啥`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 样式，边框不会向右延伸到第一列之外，但我需要折叠边框。

我该如何解决这个问题？

【参考方案1】：

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

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