Search code examples
htmlcsscss-tables

display:table div with percentage width 1px bug

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.

enter image description here

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

Is there any fix for the bug?

Solution

  • This seems to be a specific webkit bug : https://bugs.webkit.org/show_bug.cgi?id=140371

    The width of a display:table-* element is not always properly calculated when contained in a parent whose width is not defined with an absolute unit. You can see this issue in action here: Look at the right side of red elements

    enter image description here

    You can fix this issue in 2 different ways

    1. You could define the width of parent element with an absolute unit or
    2. You could apply display: table also to the container element. This doesn't really solve the bug but it should not be noticeable anymore (because it will affect also the parent element).