JSFiddle - React, Tailwind, and code Playground

HTML

<div class="table-body">
  <table id="bodytable">
   <thead class="table-header">
      <tr>
        <th class="header-cell col1">One</th>
        <th class="header-cell col2">Two</th>
        <th class="header-cell col3">Three</th>
        <th class="header-cell col4">Four</th>
        <th class="header-cell col5">Five</th>
      </tr>
    </thead>
  
    <tbody style="display: block;">
      <tr>
        <td class="body-cell col1">body row11</td>
        <td class="body-cell col2">body row2</td>
        <td class="body-cell col3">body row2</td>
        <td class="body-cell col4">body row2</td>
        <td class="body-cell col5">body row2 en nog meer</td>
      </tr>
      <tr>
        <td class="body-cell col1">body row1</td>
        <td class="body-cell col2">body row2</td>
        <td class="body-cell col3">body row2</td>
        <td class="body-cell col4">body row2</td>
        <td class="body-cell col5">body row2 en nog meer</td>
      </tr>
      <tr>
        <td class="body-cell col1">body row1</td>
        <td class="body-cell col2">body row2</td>
        <td class="body-cell col3">body row2</td>
        <td class="body-cell col4">body row2</td>
        <td class="body-cell col5">body row2 en nog meer</td>
      </tr>
      <tr>
        <td class="body-cell col1">body row1</td>
        <td class="body-cell col2">body row2</td>
        <td class="body-cell col3">body row2</td>
        <td class="body-cell col4">body row2</td>
        <td class="body-cell col5">body row2 en nog meer</td>
      </tr>
      <tr>
        <td class="body-cell col1">body row1</td>
        <td class="body-cell col2">body row2</td>
        <td class="body-cell col3">body row2</td>
        <td class="body-cell col4">body row2</td>
        <td class="body-cell col5">body row2 en nog meer</td>
      </tr>
      <tr>
        <td class="body-cell col1">body row1</td>
        <td class="body-cell col2">body row2</td>
        <td class="body-cell col3">body row2</td>
        <td...

CSS

.table-header
{
    position: relative;
    display: block;
}
.table-body
{
    overflow: auto;
    height: 400px;
}

.header-cell
{
   background-color: yellow;
   min-width: 330px;
   height: 50px;
}

.body-cell {
  min-width: 330px;
  height: 50px;
}

JavaScript

$(".table-body").scroll(function ()
{ console.log(this.scrollTop);
         $(".table-header")[0].style.top = (this.scrollTop -5) + 'px';       
    });