title: Html table with fixed header and vertical scrollbars on the table body
body: <p>My pen:</p>
  
  <p><a href="http://codepen.io/helloworld/pen/qHDFB" rel="nofollow">http://codepen.io/helloworld/pen/qHDFB</a></p>
  
  <p>I would like to create a html table:</p>
  
  <ul>
  <li>With a header that stays fixed</li>
  <li>A table body that shows scrollbars</li>
  <li>The height should NOT have a fixed pixel height it should have 100% height.</li>
  <li>The header cells should be aligned to the row cells. I mention this because often I have seen solutions where column1 enters the horizontally the area of header2. This looks bad.</li>
  <li>Its ok for me when the columns have a percentage width but not pixel because that would not be responsive.</li>
  <li>performance plays no role it will show max 16 rows appr. with max 7 columns.</li>
  </ul>
  
  <p>I want to use CSS only.</p>
  
  <p>It should work in IE10+ and latest FF/Chrome.</p>
  
  <p>You can also use the new CSS Grid Layout from Microsoft which will be ported over to webkit etc... with -ms-grid etc...</p>
  
  <p>How can I make the above individual sample work that the header stays fixed and and the body of the table has vertical scrollbars not the html body itself?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;table&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;
          &lt;div&gt;First&lt;/div&gt;
        &lt;/th&gt;
        &lt;th&gt;
          &lt;div&gt;Second&lt;/div&gt;
        &lt;/th&gt;
        &lt;th&gt;
          &lt;div&gt;Third&lt;/div&gt;
        &lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;First&lt;/td&gt;
        &lt;td&gt;Second&lt;/td&gt;
        &lt;td&gt;Third&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;First&lt;/td&gt;
        &lt;td&gt;Second&lt;/td&gt;
        &lt;td&gt;Third&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;First&lt;/td&gt;
        &lt;td&gt;Second&lt;/td&gt;
        &lt;td&gt;Third&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;First&lt;/td&gt;
        &lt;td&gt;Second&lt;/td&gt;
        &lt;td&gt;Third&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;First&lt;/td&gt;
        &lt;td&gt;Second&lt;/td&gt;
        &lt;td&gt;Third&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;First&lt;/td&gt;
        &lt;td&gt;Second&lt;/td&gt;
        &lt;td&gt;Third&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;First&lt;/td&gt;
        &lt;td&gt;Second&lt;/td&gt;
        &lt;td&gt;Third&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;First&lt;/td&gt;
        &lt;td&gt;Second&lt;/td&gt;
        &lt;td&gt;Third&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;First&lt;/td&gt;
        &lt;td&gt;Second&lt;/td&gt;
        &lt;td&gt;Third&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;First&lt;/td&gt;
        &lt;td&gt;Second&lt;/td&gt;
        &lt;td&gt;Third&lt;/td&gt;
      &lt;/tr&gt;                  
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>body, html{
    margin:0;
    padding:0;
    height:100%;
    width:100%;
  }
  
  table{
    width:100%;
    height:100%;
  }
  
  td{
    width:33%;
    border:black solid 1px;
  }
  
  tbody{
    overflow-x:hidden;
    overflow-y:auto;
  }
  
  tr td{
    text-align:center;
    height:100px;
  }
  
  th{
    background:lightgray;
    padding:10px;
    border:black solid 1px;
  }
  </code></pre>