Scrollable Table with Fixed Header

Hide the Scrollbar first

::-webkit-scrollbar { 
    display: none; 
}

Set the CSS of <tbody>

Change the display property, so that the height and overflow-y can be configured.

Set the height, and add overflow-y to make the table body scrollable in a range.

tbody{
  display: inline-block; // or block
  height: 120px;
  width: 100%;  // Width follow the <table>
  overflow-y: auto;
}

Set the CSS of <tr>, <th>, and <td>

Because we change the display of <tbody>, we also need to configure the width of each row and each element in <thead> and <tbody>.

<style>
  tr{
    display: flex;
  }
  th, td{
    flex:1;
  }
</style>

<table>
  <thead>
    <tr>
      <th>Title</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Element</td>
    </tr>
  </tbody>
</table>