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

Question

I have a div that has decimal width (e.g. 250.5px) and a table inside it with a width of 100%. For some reason, Chrome truncates the decimal portion of the width of the table (for example, from 250.5 to 250 pixels). When the page is displayed, the div is rounded up, and there is 1 pixel gap between the right and right sides of the div. If I nest a div instead, I will not get this problem.

Why is this happening, and is there a way to make the table save the decimal part? I have a problem only in Chrome; IE10 looks great.

Demonstration of the problem @ 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

For a detailed explanation, see.

In principle, if it is a percentage width, then yes, this is respected. However, Chrome does crop fractional pixels.