Chrome bug with colspan and border?

Question

In the example below, there is a border on top of the right cell. It only appears in Chrome, is it a Chrome bug?

HTML / CSS

html, body {   height: 100%; } table {   border-collapse: collapse;   width: 100%;   height: 100%; } .left {   border-right: 1px #aaaaaa solid;   border-top: 1px #aaaaaa solid; }

<table>   <tr>     <td colspan=2>top</td>   </tr>   <tr>     <td class="left">left</td>     <td>right</td>   </tr> </table>

Here is the example as a fiddle.

Chrome Screenshot

Answer 1

This appears to be the same bug listed here (or similar)

An easy workaround is at the bottom of this answer.

This is a relevant comment under that bug report:

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.

Here is an example that highlights the same problem:

html,  body {    height: 100%;  }  table {    border-collapse: collapse;    width: 100%;    height: 100%;  }  .left {    border-right: 1px #aaaaaa solid;    border-top: 1px #aaaaaa solid;  }  .right {    border-top: double 20px #F00;  }

<table>    <tr>      <td colspan=2>top</td>    </tr>    <tr>      <td class="left">left</td>      <td class="right">right</td>    </tr>  </table>

I added this:

.right { border-top: double 20px #F00; } 

Which results in this in Chrome:

That grey border would not be between the double red border if it was not a bug.

For comparison, this is how it should look (taken in Firefox):

Here are the rules of border conflicts:

Rule 1: You do not talk about border conflicts

The following rules determine which border style "wins" in case of a conflict:

1. Borders with the 'border-style' of 'hidden' take precedence over all other conflicting borders. Any border with this value suppresses all borders at this location.

2. Borders with a style of 'none' have the lowest priority. Only if the border properties of all the elements meeting at this edge are 'none' will the border be omitted (but note that 'none' is the default value for the border style.)

3. If none of the styles are 'hidden' and at least one of them is not 'none', then narrow borders are discarded in favor of wider ones. If several have the same 'border-width' then styles are preferred in this order: 'double', 'solid', 'dashed', 'dotted', 'ridge', 'outset', 'groove', and the lowest: 'inset'.

4. If border styles differ only in color, then a style set on a cell wins over one on a row, which wins over a row group, column, column group and, lastly, table. When two elements of the same type conflict, then the one further to the left (if the table's 'direction' is 'ltr'; right, if it is 'rtl') and further to the top wins.

---

Workaround

Here is a workaround, just don't use border-collapse: collapse:

table {    border-collapse: separate; /* the default option */    border-spacing: 0; /* remove border gaps */  }  td {    padding: 20px;    border-right: solid 1px #CCC;    border-bottom: solid 1px #CCC;  }  td:first-child {    border-left: solid 1px #CCC;  }  table {    border-top: solid 1px #CCC  }

<table>    <tr>      <td colspan="3"></td>    </tr>    <tr>      <td></td>      <td></td>      <td></td>    </tr>  </table>

table {   border-collapse: separate; /* the default option */   border-spacing: 0; /* remove border gaps */ } td {   padding: 20px;   border-right: solid 1px #CCC;   border-bottom: solid 1px #CCC; } td:first-child {   border-left: solid 1px #CCC; } table {   border-top: solid 1px #CCC } 

Answer 2

Since its a Chrome-Bug let's think up a workaround. So far I only came up with one that involves changing the html:

http://jsfiddle.net/5366whmf/24/

It adds another row:

<table style="border-collapse: collapse">  <tr><td colspan=2>top</td></tr>  <tr><td style="height: 0"></td></tr> <!-- fix for chrome -->  <tr><td style="border-top: 1px solid red">left</td><td>right</td></tr> </table>