Double border-spacing with thead in Chrome and Safari

Question

I have a table that uses thead and tbody. The table has border-spacing set, and in Chrome and Safari the space between the header row and the rest is doubled.

It was reported as an issue for Chrome late last year, but that's the only reference to this I can find. Has anyone else had this, or know how to get around it?

<table style="border-spacing: 0 5px">
<thead>
    <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
        <th>Heading 3</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
</tbody>

It displays as expected (all rows equally spaced) in Firefox, not sure about IE.

Answer 1

Use css:

table {
   border-collapse: collapse;
}

If this doesn't work or screws up one of the other browsers, I don't know what to tell you.

Answer 2

Thanks all for the responses. (I can't work out how to reply individually).

@dany: the missing </tr> was an error in copying, the actual code does have it.

@dark_charlie: I probably don't, but as ClarkeyBoy mentioned it is better to. Besides, thead has some styling attached.

@tandu: border-collapse is currently set to 'separate'.

I think I will just forget about border-spacing and try to get the same effect another way.