Felix A J Felix A J - 1 year ago 130
CSS Question

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?

Answer Source

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).
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download