title: Using percent widths on table elements
body: <p>Hopefully I'm asking a stupid question here:</p>
  
  <p>I've got a div on my page that's display:block and 1187px wide.  Inside that div I've got a table that is display:table, width:100%, and is 1456px wide.  So that's not adding up....</p>
  
  <p>Inside the table I've got a tbody that is display:table-row-group, width:auto, and is 1456px wide.  Inside that I've got a tr that is display:table-row, width:100% and is 1456px wide.  Good so far....</p>
  
  <p>Inside that I've got a td that is display:table-cell, width:20%, and is 67px wide.  That's definitely not 20% of 1456.  Another td in there is display:table-cell, width: 40%, and is 1218px wide.  That's far more than 40% of 1456.  Generally it looks like my widths are being driven by my content and my td's are delightfully ignoring the percentages they've been assigned.  One of my td's is width:auto, so it should be able to absorb all the leftover width in the row once the others have taken their respective percentages?</p>
  
  <p>Are there any common pitfalls that I may have fallen into here?</p>