Scrollable table with fixed header

by Ayyappan Sakthivadivel

HTML

<table>
  <thead>
    <tr><th>Born</th><th>Who</th><th>Who</th></tr>
  </thead>
  <tbody>
    <tr><td>1879</td><td>Alber Einstein</td><td>Alber Einstein</td></tr>
    <tr><td>1643</td><td>Isaac Newton</td><td>Alber Einstein</td></tr>
    <tr><td>1918</td><td>Richard Faynman</td><td>Alber Einstein</td></tr>
    <tr><td>1564</td><td>Galileo Galilei</td><td>Alber Einstein</td></tr>
    <tr><td>1902</td><td>Paul Dirac</td><td>Alber Einstein</td></tr>
    <tr><td>1885</td><td>Niels Bohr</td><td>Alber Einstein</td></tr>
    <tr><td>1831</td><td>James Clerk Maxwell</td><td>Alber Einstein</td></tr>
    <tr><td>1887</td><td>Erwin Schrödinger</td><td>Alber Einstein</td></tr>
    <tr><td>1867</td><td>Marie Curie</td><td>Alber Einstein</td></tr>
    <tr><td>1858</td><td>Max Planck</td><td>Alber Einstein</td></tr>
    <tr><td>1791</td><td>Michael Faraday</td><td>Alber Einstein</td></tr>
    <tr><td>1901</td><td>Werner Heisenberg</td><td>Alber Einstein</td></tr>
  </tbody>
</table>

CSS

* {
  color: #252525;
  font-family: roboto;
}

table {
  display: inline-grid;
  grid-template-areas: 
  "head-fixed" 
  "body-scrollable";
}

thead {
  grid-area: head-fixed;
  background-color: darksalmon;
}

tbody {
  grid-area: body-scrollable;
  background-color: antiquewhite;
  overflow: auto;
  height: 200px;
}

th, td {
  min-width: 200px;
  padding: 5px 10px;
  text-align: left;
  border: 1px solid #ccc;
}

th:first-of-type, td:first-of-type {
    min-width: 50px;
}