Double border-spacing with thead in Chrome and Saf

问题:

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.

回答1:

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

回答2:

That's not exactly "THE" solution, but you might want to take a look at here for a workaround which have worked with my specific case:

How to remove extra border spacing between TBODY elements?