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

问题

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.

Chrome shows border that should not be there

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.

回答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.

回答2:

Some glitch related to tr.spacer.

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

回答3:

Since this seems to be a bug with Chrome—instead of using a colspan, you could write out the remaining cells needed to complete the row, and be sure that they don't have a class that includes a border.

This:

<tr><td class="border">1</td><td class="border">2</td><td class="no-border">3</td></tr>
<tr><td colspan="3" class="no-border">&nbsp;</td></tr>

Would become:

<tr><td class="border">1</td><td class="border">2</td><td class="no-border">3</td></tr>
<tr><td colspan="2" class="no-border">&nbsp</td><td class="no-border">&nbsp;</td></tr>

I had to use border-collapse, and was having the same problem. This simple HTML markup change worked for me.

回答4:

After days of this issue being on my mind, a super hacky solution finally hit me. Set the border color to the same color as your background.

td {
  border: 1px solid (background color);
}

来源：https://stackoverflow.com/questions/29282488/erroneous-table-border-displays-in-chrome-only-confirmed-bug

标签

html

css

google-chrome

internet-explorer