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:

![Desired result, Firefox and IE](https://i.stack.imgur.com/eEIOL.png)

Here is in Chrome and Safari

![Chrome and Safari](https://i.stack.imgur.com/NQc9a.png)

And here is in Opera:

![Opera](https://i.stack.imgur.com/OlLKb.png)

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;
}

```