Erroneous table border displays in Chrome only **Confirmed Bug**

Looks like to be a Chrome bug.

Minimal showcase reproducing it

.test {
  border-collapse: collapse;
}

td {
  border: solid 1px blue;
}

.no {
  border: none;
}
<table class="test">
<tr>
<td>one</td>
<td class="no">two</td>
</tr>
<tr>
<td class="no" colspan="2">double</td>
</tr>
</table>

Chromium tracking (somehow) related border rendering bug

A little disturbing the mention

It's a known (old) issue in our table code. Collapsing borders are determined based on adjacent cells and our code doesn't deal correctly with spanning cells (we only consider the cell adjoining the first row / column in a row / column span). On top of that, our border granularity is determined by the cell's span.

To fix this bug, we would need to overhaul our collapsing border code, which is a big undertaking.

In conclusion:

If the table has border-collapse

and the cell is colspaning

Then different border settings (for that cell, implicitly) will fail

Posibilities to fix it:

Setting border-style: hidden to the cell has higher priority and will hide all the borders (not good)

Removing colspan in the spacers

or maybe remove fully the spacers rows and handle the display without them.


Some glitch related to tr.spacer.

As a workaround set colspan=7 to td in tr.spacer.