My minimum working example code is pretty straightforward:
<body>
<table border="0" cellspacing="0" cellpadding="0" style="width: 50px; ">
<thead>
<tr>
<td style="width: 25px;" headerindex="0">
<div>00</div>
</td>
<td style="width: 25px;" headerindex="1">
<div>15</div>
</td>
</tr>
</thead>
</table>
</body>
Please open the following JSfiddle in Chrome at 100% zoom: https://jsfiddle.net/kghq1hs2/
Check the width of any "td" element. It should be 25px.
Now zoom to 110%, 125% or anything similar.
Check again the width of any "td" element, and find that it is not 25px, but something like 24.667px, 24.800px... or 25.200px, 25.333px, ..., depending on which td you chose.
If you have more than two columns, you can see a pattern: the first half of the tds are rendered too big, and the second half are rendered too small, which accumulates if you have like 100 of these cells and makes for very odd-looking cell borders if you expect them to take up exactly 25px each.
This does not happen in Internet Explorer. I could circumvent it by using a width that happens to be divisible through 10 and 3 and 4, e.g. 60. But 60 is too wide.
Any suggestions on this issue?
The problem does not occur in Gecko- or Trident-based browsers. However, as per the Chromium dev team, this seems to be "working as intended" in Chrome, at least the bug has status WONTFIX: https://bugs.chromium.org/p/chromium/issues/detail?id=717469
Feel free to leave a comment in the bug report if you think that they should fix this.