CODEWITHSUNDEEP
css
wrygiel
wrygiel

Reputation: 5180

How to remove extra border spacing between TBODY elements?

IMPORTANT: This question is no longer valid. This bug was fixed in recent versions of Chrome.

I use border-spacing: 1px CSS rule to get all the cells in my TABLE to have a 1px spacing between them. However, I have to use multiple TBODY elements in my table. I get 2px between THEAD, TBODY and TFOOT elements (Chrome).

What's the easiest way to replace these 2px gaps with 1px?

The gaps

Exact HTML and CSS code: http://jsfiddle.net/qQA3Z/

Upvotes: 8

Views: 17912

Answers (5)

Talha Umar
Talha Umar

Reputation: 11

To remove spacing user table {border-spacing:0}

Upvotes: 1

John Smith
John Smith

Reputation: 1814

What personally solved it for me was changing the line-height to 0

line-height:0; border-spacing: 0

Upvotes: 4

jamps3
jamps3

Reputation: 71

This solves it for me:

table { border-collapse: collapse!important;}

Upvotes: 7

greener
greener

Reputation: 5069

It would appear that there's a conflict between the border-collapse at table level and the children thead,tbody,tfoot. A possible workaround:

http://jsfiddle.net/qQA3Z/3/

body { margin: 10px; }
div {border: 1px solid #aaa; display:inline-block}
table {
    background: #fff;
    border-collapse: collapse;
}
td {
    font-family: Tahoma;
    background: #ddd;
    padding: 5px 8px;
    border:1px solid #fff
}

<div>
<table>
    <thead>
        <tr><td colspan='2'>Header</td></tr>
        <tr><td>Column 1</td><td>Column 2</td></tr>
    </thead>
    <tbody>
        <tr><td>Element</td><td>Element</td></tr>
        <tr><td>Element</td><td>Element</td></tr>
    </tbody>
    <tfoot>
        <tr><td colspan='2'>Footer</td></tr>
    </tfoot>
</table>
</div>

Upvotes: 8

Cat
Cat

Reputation: 67522

Note: This is a Webkit-specific bug. (Not present in Firefox, and as usual IE won't even load jsFiddle to test it.)

Unfortunately, there is no way to properly fix this. There is an open question on this very topic already. Additionally, there is an open bug report since Chrome 8 which has been confirmed to exist through Chrome 20 (and I can confirm in Chrome 25). There is also an open Webkit bug thread on this matter, which is still "NEW".

To be honest, I can't even find a workaround for this. Playing with border-spacing, margin, and even position don't seem to have an effect on this.

Upvotes: 9

Related Questions