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

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