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

Question

I have an issue that seems to be isolated to Chrome...which is usually NOT the way it goes. However, I have recreated the issue as purely as possible in the following plunkr.

http://plnkr.co/edit/k0viyc

To illustrate the problem, here is an image that displays the border in the highlighted row in Chrome and how it isn't showing in IE.

If you remove either of the following rows:

<tr class="spacer">
  <td colspan="14" class="noBorder noBackground">
    *** By removing this row, the extended border goes away ***
  </td>
</tr>

You will see the associated border shows/hides.

We've been through lots of tests on this and can't isolate the problem. The primary css remains in the plunkr, including the inline styles and classes that are primarily byproducts of related bindings.

I would like to know if there is an error in the current design or if this is truly a bug in Chrome. If it's a bug, what is the least common elements here needed to recreate it? Is it worth submitting as a bug or is this just going to be a scenario we should just try to avoid.

Thanks for your time in advance.

Answer 1

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.

Answer 2

Some glitch related to tr.spacer.

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