Columns are miss-aligned when zoomin in/out with the browser

[dalvarezmartinez1]

Reproducible in Chrome

Everything is pretty standard except cells have a right border (to check if columns become miss-aligned)

    table.dataTable thead th,
    table.dataTable tbody td {
      border-right: 1px solid red;
    }

When zooming in with the browser, for example at 150%, the borders start to become miss-aligned, the more to the right, the worse it becomes. Zooming out at 80% causes the same issue. https://jsfiddle.net/dalvarezmartinez1/jo6vnd1c/12/

Note, the problem is not reproducible, if instead of borders, we're using background-color to observe the miss-alignment

    table.dataTable thead th:nth-child(odd) {
      background-color:red;
    }
    table.dataTable tbody td:nth-child(odd) {
       background-color:blue;
    }

Not reproducible with background color instead of border: https://jsfiddle.net/dalvarezmartinez1/jo6vnd1c/19/

[colin0117]

Please see my reply on your forum thread. https://datatables.net/forums/discussion/65631/miss-aligned-columns-when-zooming#latest