title: Table with flexible fixed header row and scrollable body
body: <p>I want to fix the first row and the scrollable body. When I like to fix with the css like this</p>
  
  <pre><code>thead
  {
      display: block;
      width: 500px;
  }
  
  tbody
  {
      display: block;
      width: 500px;
      height: 200px;
      overflow: auto !important;
  }
  </code></pre>
  
  <p>But the headers are disaligned. the column and the rows are disaligned.</p>
  
  <pre><code>th,td
  {
      width:50px;
  }
  </code></pre>
  
  <p>I really don't like to fix the <code>&lt;th&gt;</code> element with the 'width' property. I want that as flexible. Any idea for that flexible fixed header?</p>