Why does Chrome truncate the decimal width of a 100% width table in a div?

Question

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;
}

Answer 1

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.