table adds extra pixels in firefox

Question

I just started creating a website for a darts organisation but I'm encountering some problems in my table layout.

I made a table with a table-layout fixed and 978px width. When I take a look in firefox it somehow for unknown reason always adds another 8px. In safari everything works perfect. I have no idea what is happening here.

I made the web with the problem available on the link below. Any suggestions is welcome.

 .dt { margin: 0px; border-width: 0px; border-spacing: 5px; border-collapse: separate; table-layout: fixed; } .dt th { border-bottom: 1px solid #cdcdcd; color: #5197fc; font-weight: bold; font-size: 12px; } .dt td { border-bottom: 1px dotted #cdcdcd; overflow: hidden; white-space: nowrap; } 

 <table runat="server" style="width: 978px;" class="dt"> <tr runat="server"> <th runat="server" class="left" style="width: 511px">Naam</th> <th runat="server" class="left" style="width: 152px">Tel/Gsm</th> <th runat="server" class="left" style="width: 252px">Email</th> <th runat="server" class="left" style="width: 38px"></th> </tr> <tr runat="server"> <td runat="server" style="width: 511px"></td> <td runat="server" style="width: 152px"></td> <td runat="server" style="width: 252px"></td> <td runat="server" style="width: 38px"> <asp:ImageButton runat="server" ID="EditAccount" ImageUrl="~/Images/pencil.png" CommandName="EditAccount" Width="16px" Height="16px" /> <asp:ImageButton runat="server" ID="DeleteAccount" ImageUrl="~/Images/delete.png" CommandName="DeleteAccount" Width="16px" Height="16px" /> </td> </tr> </table> 

Check problem here

Type an A in the textbox and press search to see the problem.

Answer 1

I managed to solve my problem in multiple ways. I have set border collapse to collapse and adjusted the width of all table cell except the width of the last table cell of each row. for some reason firefox doesn't ever give the actuall width of the cells you asked for. it always adds or retracts some the width which shows weird behavior.

Thats why I removed the entire table and switch to div with "display: table". This doesn't give me those weird behavior problems.

 .dt { display: table; } .tr { display: table-row; } .dt .th { display: table-cell; border-bottom: 1px solid #cdcdcd; color: #5197fc; font-weight: bold; } .dt .td { border-bottom: 1px dotted #cdcdcd; overflow: hidden; white-space: nowrap; } 

  <div class="dt" style="width: 960px"> <div class="tr"> <div class="th" style="width: 500px">Naam</div> <div class="th" style="width: 150px">Tel/Gsm</div> <div class="th" style="width: 250px">Email</div> <div class="th" style="width: 60px">&nbsp;</div> </div> <div class="tr"> <div class="td" style="width: 500px">&nbsp;</div> <div class="td" style="width: 150px">&nbsp;</div> <div class="td" style="width: 250px">&nbsp;</div> <div class="td" style="width: 60px">&nbsp;</div> </div> </div> 

Answer 2

It's because you have border-spacing: 5px; on the dt elements. Decreasing that value should decrease the amount of "extra pixels".

Answer 3

Adding border-collapse: collapse; should fix your problem