Fix Table Head While Scrolling Tbody And Thead Column Aligned To Tbody Column

Here is table with fixed outer height, and i need when scroll start, thead will be fixed and tbody will be scroll that show heading of each column.Is there any idea to fix heading

Solution 1:

Check this with updated css

.max_height{margin:0px;max-width:450px;}
tablethead,tabletbody{
  display:block;
}

tabletbody{
  max-height:100px;
  overflow:auto;
}

tabletr{
  display:table;
  width:100%;
  table-layout:fixed;
}

<divclass="max_height"><tableclass="table"><thead><tr><th>Firstname</th><th>Lastname</th><th>Email</th></tr></thead><tbody><tr><td>John</td><td>Doe</td><td>john@example.com</td></tr><tr><td>Mary</td><td>Moe</td><td>mary@example.com</td></tr><tr><td>July</td><td>Dooley</td><td>july@example.com</td></tr><tr><td>July</td><td>Dooley</td><td>july@example.com</td></tr><tr><td>July</td><td>Dooley</td><td>july@example.com</td></tr><tr><td>July</td><td>Dooley</td><td>july@example.com</td></tr></tbody></table></div>