title: Why does Chrome truncate the decimal width of a 100% width table in a div?
body: <p>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.  </p>
  
  <p>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.</p>
  
  <p>Demo of issue @ <a href="http://jsfiddle.net/7UrHa/" rel="nofollow">http://jsfiddle.net/7UrHa/</a></p>
  
  <p><strong>HTML:</strong> </p>
  
  <pre><code>&lt;div id="redDiv"&gt;
      &lt;table id="blueTable"&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  Content
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#redDiv {
      width: 250.5px;
      height: 250px;
      background-color: red;
  }
  
  #blueTable {
      width: 100%;
      background-color: blue;
  }
  </code></pre>