title: div table column width doesn't match rows
body: <p>Spending way too much time on (what should be) a simple div table.  PROBLEM:  the column headers will not resize to the width of the table, or the rows.  The rows appear okay, but the column headers don't.</p>
  
  <p>Trying to avoid having fixed widths as the next table I post may have a different number of columns.  With the following code the column headers are all scrunched to the left, next to each other, but they don't match the rows...</p>
  
  <pre><code> &lt;style type="text/css"&gt;
  
  .table-container {
      display: table;
      width: 50%;
      table-layout: fixed;
      border-collapse: collapse;
  }
  
  .table-heading {
      font-weight: bold;
      display: table-caption;
      background-color: #e9e9e9;
      text-align: center;
      padding: 8px;
      line-height: 21px;
      font-size: 18px;
      color: #CA8327;
  }
  
  .table-row {
      display: table-row;
      text-align: center;
  }
  
  .table-row-shade {
      display: table-row;
      text-align: center;
      background-color: #e9e9e9;
  }
  
  .table-col {
      display: table-cell;
      text-align: center;
      border: 1px solid #ca8327;
  }
  
  &lt;/style&gt;
  
  &lt;div class="table-container"&gt;
    &lt;div class="table-heading"&gt;Approximate Dimensions (inches)&lt;/div&gt;
     &lt;div class="table-col"&gt;
      &lt;div class="table-col"&gt;size&lt;/div&gt;
      &lt;div class="table-col"&gt;head strap (inc. frame)&lt;/div&gt;
      &lt;div class="table-col"&gt;chin strap&lt;/div&gt;
      &lt;div class="table-col"&gt;lbs.*&lt;/div&gt;
     &lt;/div&gt;  
    &lt;div class="table-row-shade"&gt;
      &lt;div class="table-col"&gt;XXS&lt;/div&gt;
      &lt;div class="table-col"&gt;3-9 inches&lt;/div&gt;
      &lt;div class="table-col"&gt;2-3 inches&lt;/div&gt;
      &lt;div class="table-col"&gt;&lt; 5 lbs*&lt;/div&gt;
    &lt;/div&gt;
      &lt;div class="table-row"&gt;
      &lt;div class="table-col"&gt;XS&lt;/div&gt;
      &lt;div class="table-col"&gt;5-13 inches&lt;/div&gt;
      &lt;div class="table-col"&gt;3-7 inches&lt;/div&gt;
      &lt;div class="table-col"&gt;5 - 10lbs*&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/Speedy1/t3e3ken6/" rel="nofollow">http://jsfiddle.net/Speedy1/t3e3ken6/</a></p>