Почему `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/)

In Chrome (79.0.3945.117) верхняя граница простирается вправо за строкой с border-top: 10x solid black;, как показано на следующем рисунке:

Firefox и IE отобразите таблицу так, как я ожидал:

Обратите внимание, что если я удаляю стиль border-collapse: collapse, граница не будет расширяться вправо за пределы первый столбец, но мне нужно свернуть границы.

Как я могу решить эту проблему?

Answer 1

Изменение первой строки таблицы для явного перечисления количества столбцов, а не одного столбца с colspan, кажется, решает проблему:

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