Html table with fixed header and vertical scrollbars on the table body

Question

My pen:

http://codepen.io/helloworld/pen/qHDFB

I would like to create a html table:

• With a header that stays fixed
• A table body that shows scrollbars
• The height should NOT have a fixed pixel height it should have 100% height.
• 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.
• Its ok for me when the columns have a percentage width but not pixel because that would not be responsive.
• performance plays no role it will show max 16 rows appr. with max 7 columns.

I want to use CSS only.

It should work in IE10+ and latest FF/Chrome.

You can also use the new CSS Grid Layout from Microsoft which will be ported over to webkit etc... with -ms-grid etc...

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?

HTML

<table>
  <thead>
    <tr>
      <th>
        <div>First</div>
      </th>
      <th>
        <div>Second</div>
      </th>
      <th>
        <div>Third</div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>First</td>
      <td>Second</td>
      <td>Third</td>
    </tr>
    <tr>
      <td>First</td>
      <td>Second</td>
      <td>Third</td>
    </tr>
    <tr>
      <td>First</td>
      <td>Second</td>
      <td>Third</td>
    </tr>
    <tr>
      <td>First</td>
      <td>Second</td>
      <td>Third</td>
    </tr>
    <tr>
      <td>First</td>
      <td>Second</td>
      <td>Third</td>
    </tr>
    <tr>
      <td>First</td>
      <td>Second</td>
      <td>Third</td>
    </tr>
    <tr>
      <td>First</td>
      <td>Second</td>
      <td>Third</td>
    </tr>
    <tr>
      <td>First</td>
      <td>Second</td>
      <td>Third</td>
    </tr>
    <tr>
      <td>First</td>
      <td>Second</td>
      <td>Third</td>
    </tr>
    <tr>
      <td>First</td>
      <td>Second</td>
      <td>Third</td>
    </tr>                  
  </tbody>
</table>

CSS

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;
}

Answer 1

Isn't this what you're looking for? - http://www.imaputz.com/cssStuff/bigFourVersion.html

Just view the source of the example, and this should get you going.