Scrollable table with sticky header. Only essentials css ( https://jsfiddle.net/xfoph4ne/ )

index.css

main{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#content{
  height: 100%;
  display: flex;
  flex-direction: column;
}

.table-wrapper{
  overflow-y: scroll;
}

.table-wrapper th{
    position: sticky;
    top: 0;
}

table{
  border-collapse: collapse;
}

index.html

<main>
  <div id="content">
  <p>content before</p>
    <div class="table-wrapper">
      <table>
        <thead>
          <tr>
            <th>Header</th>
            <th>Header</th>
            <th>Header</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
          </tr>
          <!-- ... -->
          <tr>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div>content after</div>
  </div>
</main>