How to remove spaces between cells in a html table

Question

I try to remove white space between Table1Header and Table2Header. I tried border:0px, padding:0px and border-spacing:0px; styles. Firefox and Opera tell me that my border-spacing style is overrided by the user agent style (which is 2px). How can I force browser to use my styleshits?

http://jsfiddle.net/cdjDR/2/

<table class="tableGroup">
    <tbody>
        <tr>
            <td>
                <table>
                    <tbody>
                        <tr class="tableHeader">
                            <td><span class="tableHeader"><label>Table1Header</label></span>

                            </td>
                        </tr>
                        <tr class=" tableData">
                            <td>
                                <div class="ui-datatable">
                                    <div>
                                        <table>
                                            <thead>
                                                <tr>
                                                    <th>
                                                        <div><span><span class="ui-header-text">Table1Col1</span></span>
                                                        </div>
                                                    </th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td><span>2</span>

                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
            <td>
                <table>
                    <tbody>
                        <tr class="tableHeader">
                            <td><span class="tableHeader"><label>Table2Header</label></span>

                            </td>
                        </tr>
                        <tr class="tableData">
                            <td>
                                <div class="ui-datatable">
                                    <div>
                                        <table>
                                            <thead>
                                                <tr>
                                                    <th>
                                                        <div><span><span class="ui-header-text" >Table2Col1</span></span>
                                                        </div>
                                                    </th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td><span>12345</span>

                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

span.tableHeader > label {
    display: inline-block;
    float:left;
    line-height:30px;
    padding-left:10px;
    color: #202020;
    font-size: 13px;
}
tr.tableHeader {
    background-color: #EEEEEE;
}
table.tableGroup, table.tableGroup > tr > td > table {
    border-spacing: 0px;
}
table.tableGroup div.ui-datatable th > div > span >span.ui-header-text {
    color: #808080;
    font-size: 11px;
}
table.tableGroup td, table.tableGroup th {
    padding: 0px;
    border: 0px;
}

Planet

table { border-collapse: collapse; } is probably what you need. But, nevertheless -1 for this mess (even if it is just a sample)! – Unselfish

Answer 1

The browsers are not telling you that your border-spacing style is overridden by the user agent style sheet. Instead, they may indicate that inheritance does not take place for it. This is simply caused by the fact that some style sheet sets the property on the element.

The reason why your rule is not applied to the inner table element is that it does not match any of your selectors. The selector

table.tableGroup > tr > td > table

does not match it, because a tr element is never a child of table even if might appear to be. By HTML syntax, there is an intervening tbody element, even if its start and end tag are missing. The following selector would match:

table.tableGroup > tbody > tr > td > table

Of course, a mere table selector would do the job as well, provided that you want all table elements to be styled by the rule.

Heuser

It's better if he uses table.tableGroup table if he is trying to collapse border of all the nested tables... or even better just table {} but anyways +1, I didn't told him that tbody was missed – Heteronomy

Answer 2

You can simply use border-collapse: collapse; or even border-spacing: 0; is fine

table { /* Will apply to all tables */
    border-spacing: 0;
    /* OR border-collapse: collapse; */
}

Demo

You can easily override the useragent stylesheet with a simple element selector.

---

If you want to normalize the styles, you should use CSS Reset

---

Coming to your selector which is seems dirty to me, as yo are targeting the table with class .tableGroup and the table nested under that

table.tableGroup, table.tableGroup > tr > td > table {
    border-spacing: 0px;
}

So you better use

table.tableGroup, 
table.tableGroup table {
   border-spacing: 0;
}

Heteronomy

@Planet yes, but if you are targeting all the tables than don't use that selector – Heteronomy

Answer 3

you need to add (border="0" cellpadding="0" cellspacing="0") Table tributes in every table tag

example

<table border="0" cellpadding="0" cellspacing="0">

*example with your classes *

<table border="0" cellpadding="0" cellspacing="0"  class="tableGroup">

Frankel

Answer 4

Try this

table {
    border-spacing:0px; 
}

works by using css

Astrea

tnx man .. not experienced as u.. trying learn from Stackoverflow as much as i can.. Your answer is much better than mine.. i also learn that i can also do that. Thanks .. – Astrea

No hard feelings :) we answer wrong and we learn, just do this with CSS, I will upvote your answer :) – Heteronomy