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