title: CSS table persistent headers
body: <p>I have a table with fixed layout. I added some code to take the thead element out of the flow (position: fixed) to stay on the screen when scrolling the table.</p>
  
  <pre><code>table { table-layout:fixed; width: 100% }
  table th { width: 50px }
  table th:first-child { width: 20em; }
  
  table td { width: 50px }
  table tbody tr:first-child td:first-child { width: 20em;}
  </code></pre>
  
  <p>The problem is, when thead is taken out of the flow, the rest of the table column's resize themselves. See <a href="http://jsfiddle.net/2EDQR/3/" rel="nofollow">http://jsfiddle.net/2EDQR/3/</a> for reproduction example. Try scrolling the result frame and see how the table columns are squeezing.</p>
  
  <p>Any ideas on how to prevent this?</p>
  
  <p><strong>UPD:</strong> I need the headers to stay in the viewport when I scroll the page. The problem is when the headers are taken out of the flow, the tbody columns are resizing, so the headers do not align with the columns</p>