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

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/

Start with the linked Chrome jsfiddle and reproduce the issue at 150% and 80% zoom using the border CSS example; compare it with the background-color case. Done means header and body column borders remain aligned at both zoom levels.