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;
}
Tim
  • 51
  • 1
  • 6
  • 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. – Tim Sep 06 '13 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: https://code.google.com/p/chromium/issues/detail?id=241198 – Tim Sep 09 '13 at 01:28

1 Answers1

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.

Community
  • 1
  • 1
frydoubt
  • 77
  • 11
  • 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. – Tim Sep 06 '13 at 18:01
  • 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](http://jsfiddle.net/7UrHa/1/)? – frydoubt Sep 06 '13 at 20:22
  • 1
    Another workaround would be to set the table width to `100.5%`, like [this](http://jsfiddle.net/7UrHa/2/). – frydoubt Sep 06 '13 at 20:24
  • 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 (https://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. – Tim Sep 09 '13 at 01:33