display:table div with percentage width 1px bug

Question

The outer div have percentage width, and inner div's have display: tabel; width: 100%.

The inner div's show 1px less than outer div for some page widths while resizing. This adds an 1px line to the right.

https://jsfiddle.net/afelixj/utcswLp1/1/

Is there any fix for the bug?

Answer 1

@media screen and (-webkit-min-device-pixel-ratio:0) {
    width: calc(100% + 0.5px);
}

Notes:

• adding 1px doesn't fix the problem on WebKit … it just inverts it
• adding 0.5px introduces the problem on some non-WebKit browsers … wrapping it in a media query resolves this