How to remove spaces between cells in a html table - html

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;
}

Answer 1

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;
}

Answer 2

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">

Answer 3

Try this
table {
border-spacing:0px;
}
works by using css

Answer 4

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.