4

I have a div that has a decimal width (e.g. 250.5px) and a table inside of it with a width 100%. For some reason, Chrome will truncate the decimal portion of the table's width (e.g. from 250.5px to 250px). When the page renders, the div is rounded up, and there's a 1 pixel gap between the right side of the table and the right side of the div. If I nest a div instead, I don't get this issue.

Why does this happen, and is there a way to get the table to retain the decimal portion? I'm only having the issue in Chrome; IE10 looks fine.

Demo of issue @ http://jsfiddle.net/7UrHa/

HTML: 

<div id="redDiv"> <table id="blueTable"> <tr> <td> Content </td> </tr> </table> </div>

CSS

#redDiv { width: 250.5px; height: 250px; background-color: red; } #blueTable { width: 100%; background-color: blue; }
Improve this question
2
  • I understand that Chrome sometimes truncates fractional values, but there seems to be something specific to tables since I don't have the issue with nested divs. Commented Sep 6, 2013 at 17:29
  • 1
    I can't answer this question because it's erroneously marked as a duplicate, but for future reference it's actually a Chrome issue: code.google.com/p/chromium/issues/detail?id=241198 Commented Sep 9, 2013 at 1:28

1 Answer 1

Reset to default
0

Refer to this for an in-depth explanation.

Basically, if it's a percentage width then yes, it is respected. Chrome does however truncate fractional pixels.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

According to that post, Chrome should keep the fractional value in memory and use that value for calculations; so why would it truncate the value of the table and round up the value of the div? Also, I'm not sure why a nested div would have the right value but a nested table would not.
Unfortunately I can't tell you why Chrome does this, or why it works with a nested div and not a table. To get around this issue, is there a particular reason you cannot nest the table inside another div, like this?
Another workaround would be to set the table width to 100.5%, like this.
Thanks for your response. I can't update the layout because I'm branding an application, and modifying the layout of the page would prevent me from being able to use future updates. I found the issue logged on Chromium's code page (code.google.com/p/chromium/issues/detail?id=241198#makechanges). As a workaround, I just added a snipped of JavaScript to resize the div. Maybe a bit over overkill for a single pixel, but it was driving me crazy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.