JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="tableWrapper">
  <table class="">
    <thead style="background: #fff;">
      <tr>
        <th>#</th>
        <th>Name</th>
        <th>Place</th>
        <th>Profesion</th>
        <th>Points</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>John Doe</td>
        <td>Poland</td>
        <td>Functional Consultant</td>
        <td>23</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jane Doe</td>
        <td>Germany</td>
        <td>Manager</td>
        <td>50</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Michael Curtis</td>
        <td>Netherlands</td>
        <td>Developer</td>
        <td>30</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Jahn Smith</td>
        <td>Spain</td>
        <td>Sales Employee</td>
        <td>39</td>
      </tr>
    </tbody>
  </table>
</div>

CSS

.tableWrapper {
  overflow: auto;
  height: 80px;
}
table {
  width: 100%;
    max-width: 100%;
}

JavaScript

function fixTables() {
    document.querySelectorAll('.tableWrapper').forEach((tableWrapper) => {
      tableWrapper.addEventListener('scroll', () => {
        var translate = 'translate(0,' + tableWrapper.scrollTop + 'px)'
        tableWrapper.querySelector('thead').style.transform = translate
      })
    })
  }

  fixTables()