title: Table width 100% is off by a single pixel (depending on actual width)
body: <p>I have a <code>table</code> in a <code>div</code> inside another <code>div</code>. The direct container has a width of <code>40%</code>, and I want the table to be as wide as this div, by setting <code>width: 100%</code>. </p>
  
  <h2>Relevant Markup</h2>
  
  <p><img src="https://i.stack.imgur.com/umXzx.jpg" alt="Markup"></p>
  
  <p>This works most of the time, however <strong>depending on the width</strong> of the browser window, the width of the table is <strong>sometimes</strong> off by a single pixel:</p>
  
  <p><img src="https://i.stack.imgur.com/A1gSt.jpg" alt="Pixel errror"></p>
  
  <p>As you can see to the right, the border is a pixel to the left of that of the sibling div <code>.info</code>. These borders should align.</p>
  
  <h2>Relevant CSS</h2>
  
  <pre><code>#userListContainer{width: 40%; float: left; }
  .info{display:block;line-height:22px; height:22px; padding-left:10px; }
  #userListContainer .info {border-right: 1px solid #999999;}
  
  .userList {
      width: 100%; 
      border-right: 1px solid #999999;
      word-break: break-all; border-spacing: 0;
      border-collapse: separate;
  }
  </code></pre>
  
  <p>Seems like a rendering bug to me. It occurs in Chrome 34.0.1847.131, not in IE10. I can't reproduce it in IE10 or the current version of FireFox.</p>