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>
    </tr>
</tbody>

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

Answer 1

thead th {position: relative; top: 5px;} will do it