JSFiddle - React, Tailwind, and code Playground

HTML

<div id="table-wrapper">
  <div id="table-scroll">
    <table>
        <thead>
            <tr>
                <th><span class="text">Asdafdf</span></th>
                <th><span class="text">Basdf</span></th>
                <th><span class="text">Casdfsdf</span></th>
            </tr>
        </thead>
        <tbody>
        <tr>
          <td>345</td>
          <td>4345sgdgsfdgdf  dsfgfdgsdfgdf</td>
          <td>4345sgdgsfdgdf  dsfgfdgsdfgdf</td>
        </tr>
        </tbody>
    </table>
  </div>
</div>

CSS

#table-wrapper {
  position:relative;
}
#table-scroll {
  height:150px;
  overflow:auto;  
  margin-top:20px;
}
#table-wrapper table {
  width:100%;
    
}
#table-wrapper table * {
  background:yellow;
  color:black;
}
#table-wrapper table thead th .text {
  position:absolute;   
  top:-20px;
  z-index:2;
  height:20px;
  width:35%;
  border:1px solid red;
}