Strange behaviour with border-collapse and colspan

Question

I am trying to make an organisational chart in HTML. The code is fairly simple, but I have some problems with the rendering in Chrome/Safari and Opera.

Here is what the result should look like, as it works in Firefox and IE:

Here is in Chrome and Safari

And here is in Opera:

The problem comes from the border-collapse: collapse property in CSS. If I use the old coding style cellspacing="0" cellpadding="0"it works more or less, but is not valid in HTML5.

I created a jsFiddle to show the problem: http://jsfiddle.net/aGVp4/7/

My HTML:

<table cellspacing="0" cellpadding="0">
    <tr>
        <td colspan="3"></td>
        <td colspan="2" class="case"></td>
        <td colspan="3"></td>
    </tr>
    <tr>
        <td colspan="3"></td>
        <td colspan="2" class="case"></td>
        <td colspan="3"></td>
    </tr>
    <tr>
        <td></td>
        <td colspan="3" class="right bottom"></td>
        <td colspan="3" class="bottom"></td>
        <td></td>
    </tr>
    <tr> <!-- No colspan here, to make the layout symmetrical -->
        <td class="right"></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td class="right"></td>
        <td></td>
    </tr>
    <tr>
        <td colspan="2" class="case"></td>
        <td colspan="4"></td>
        <td colspan="2" class="case"></td>
    </tr>
</table>

And my CSS:

.orgchart {
    border-spacing: 0;
    border-collapse: collapse;
}

td {
    width: 3em;
    height: 1em;
}

td.case {
    border: 1px solid black;
}

td.right {
    border-right: 1px solid black;
}

td.bottom {
    border-bottom: 1px solid black;
}

td.top {
    border-top: 1px solid black;
}

Answer 1

The problems seems to be caused by different interpretations of the collapsing border model in browsers. The border conflict resolution is defined in terms of cells, not slots, and when you use colspan=3, one cell spans 3 slots.

The 2nd cell of the 2nd row has a solid bottom border, and the 2nd cell of the 3rd row has no top border. When borders collapse, solid wins none. But the cells are only partially adjacent, as they span different columns. Browsers hand this differently. Chrome makes the border span all the columns of the upper cell, whereas Firefox makes the border span only one column, the one that the cells share – which is more reasonable, but CSS 2.1 seems to leave the issue open.

I tried playing with border: hidden, which helps on Chrome but causes new problems on Opera.

It seems that there are two options. You could use the HTML attributes, if they do the job. Though declared obsolete and forbidden in HTML5 CR, the same document also requires continued support to them in browsers.

But a cleaner, and perhaps more robust, approach is to avoid the problem by adding more empty cells. This means dividing two 3rd row cells into two cells so that only one of them shares a border with the cell of the 2nd row. This makes the table even more grid-like, but not essentially more complex:

<table class="orgchart">
<tr>
    <td colspan="3"></td>
    <td colspan="2" class="case"></td>
    <td colspan="3"></td>
</tr>
<tr>
    <td colspan="3"></td>
    <td colspan="2" class="case" ></td>
    <td colspan="3"></td>
</tr>
<tr>
    <td></td>
    <td colspan="2" class="bottom"></td>
    <td class="right bottom"></td>
    <td  class="bottom" ></td>
    <td colspan="2" class="bottom" ></td>
    <td></td>
</tr>
<tr> <!-- No colspan here, to make the layout symmetrical -->
    <td class="right"></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td class="right"></td>
    <td></td>
</tr>
<tr>
    <td colspan="2" class="case"></td>
    <td colspan="4"></td>
    <td colspan="2" class="case"></td>
</tr>
</table>

Answer 2

Add a new empty row <tr></tr> under the colspan will fix this problem (not a beautiful solution but works).