html - TD borders not rendered correctly with Firefox -

better check if it's code issue before reporting bug firefox dev team... here fiddle of little table css-styled. css quite simple :

table {   border-collapse: collapse;   font-size: 1em; }  th {   background-color: #a0a0d8;   font-weight: bold;   width: 20em; }  th, td {   border: 1px solid #8080b8;   padding: 2px; } 

sadly, , without zoom, got irregular borders displayed .

did make mistake, or issue should reported (didn't find such report exepcte ones zoom) ?

note : zooming forward or backward gets borders regular coefficient.

edit : here html requested :

<div class="content">   <table id="groups">     <thead>       <tr>         <th class="groupes">groupes</th>         <th class="action add" title="ajouter un nouveau groupe">+</th>       </tr>     </thead>     <tbody>       <tr id="new-group-tr" style="display: none;">         <td>           <input type="text" id="new-group-name">         </td>         <td class="action add" title="valider la création du groupe">v</td>         <td class="action cancel" title="annuler">x</td>       </tr>       <tr title="cliquer pour afficher le contenu du groupe « aucun »">         <td class="groupes">aucun</td>         <td class="action delete" title="supprimer le groupe « aucun »">x</td>       </tr>       <tr title="cliquer pour afficher le contenu du groupe « groupe_1 »">         <td class="groupes">group2</td>         <td class="action delete" title="supprimer le groupe « groupe_1 »">x</td>       </tr>       <tr title="cliquer pour afficher le contenu du groupe « new »">         <td class="groupes">group3</td>         <td class="action delete" title="supprimer le groupe « new »">x</td>       </tr>       <tr title="cliquer pour afficher le contenu du groupe « test »">         <td class="groupes">group4</td>         <td class="action delete" title="supprimer le groupe « test »">x</td>       </tr>       <tr title="cliquer pour afficher le contenu du groupe « test 2 »">         <td class="groupes">group4</td>         <td class="action delete" title="supprimer le groupe « test 2 »">x</td>       </tr>       <tr title="cliquer pour afficher le contenu du groupe « test 3 »">         <td class="groupes">group5</td>         <td class="action delete" title="supprimer le groupe « test 3 »">x</td>       </tr>       <tr title="cliquer pour afficher le contenu du groupe « test 4 »">         <td class="groupes">group6</td>         <td class="action delete" title="supprimer le groupe « test 4 »">x</td>       </tr>   </table> </div> 

edit 2 : tested firefox 44, windows 7 pro.

edit 3 : screen 120dpi (125%).

edit 4 : 120dpi according windows, 166 according dpilove...

it looks firefox doesn't render border-collapse:collapse nicely.

as workaround, try using border-collapse:separate + border-spacing:0, , draw borders separately.

table {   border-collapse: separate;   border-spacing: 0;   border-left: 1px solid #8080b8; } th {   border-top: 1px solid #8080b8; } th, td {   border-right: 1px solid #8080b8;   border-bottom: 1px solid #8080b8; } th.action, td.action {   border: 0; } 

updated jsfiddle