CODEWITHSUNDEEP
htmlcsscss-tables
Felix A J
Felix A J

Reputation: 6470

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?

Upvotes: 13

Views: 5443

Answers (7)

kahranna
kahranna

Reputation: 1

The use of display: table can come with the unwanted side effect that table css styles are applied on the div. Therefore I chose display: contents for my project.

Upvotes: 0

bryn
bryn

Reputation: 81

@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

Upvotes: 3

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123377

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

Upvotes: 18

Bertan Yaman
Bertan Yaman

Reputation: 43

.wrap{
background: #000; 
height: 400px;
width: 60%;
display:inline-table;}

Just change your css code like this

Upvotes: 3

taikuri
taikuri

Reputation: 1

I know this is rather late, but here's a fix for this bug i had to deal with too.

As mentioned in this thread the problem lies in the usage of percentage as a unit of width. The browser rounds the decimals down to a full number. So all we need to do is add 1 Pixel to the percentage based with. We can do that with calc:

width: calc(100% + 1px);

This will work in all major browsers exept IE 11 and older.

Upvotes: 0

Alexis
Alexis

Reputation: 5831

Change your display:table to display:block.

Upvotes: 1

Alex Tartan
Alex Tartan

Reputation: 6826

Your problem arises from the "60%" width of the container.

Chrome truncates decimals (300.5px will become 300px).
Therefore, when the inner div is set to "100%", it is calculated at the rounded width of the parent div

So, let's say that the outer div is 300.5px (60% of total).
The inner div is calulculated as 100% of 300px;

Upvotes: 3

Related Questions