Search code examples
htmlcsswindowsfirefoxdpi

TD borders not rendered correctly with Firefox

Better check if it's a code issue before reporting a bug to Firefox dev team... Here is a fiddle of a little table css-styled. The CSS is quite very 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, and without any zoom, I got irregular borders as displayed enter image description here.

Did I make some mistake, or is it an issue which should be reported (didn't find such report exepcte ones about a zoom) ?

Note : zooming forward or backward gets borders regular for some coefficient.

Edit : here is the HTML as 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 with FireFox 44, Windows Seven Pro.

Edit 3 : screen is 120DPI (125%).

Edit 4 : 120DPI according to windows, 166 according to DPILove...

Solution

  • It looks like Firefox doesn't render border-collapse:collapse nicely.

    As a workaround, you could try using border-collapse:separate + border-spacing:0, and draw the 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