JSFiddle - React, Tailwind, and code Playground

by budyniowski

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="tableWrapper">
  <table>
    <thead>
      <tr>
        <th>#</th>
        <th>Name</th>
        <th>Points</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>John Doe</td>
        <td>23</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jane Doe</td>
        <td>50</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Michael Curtis</td>
        <td>30</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Jahn Smith</td>
        <td>39</td>
      </tr>
    </tbody>
  </table>
</div>

CSS

.tableWrapper {
  widows: auto;
  overflow: auto;
  height: 50px;
}

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()