view raw
Felix A J Felix A J - 6 months ago 71
CSS Question

display:table div with percentage width 1px bug

The outer

have percentage width, and inner
's have
display: tabel; width: 100%

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

enter image description here

Is there any fix for the bug?


This seems to be a specific webkit bug :

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).