JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div class="wrap">
  <table>
    <tbody>
      <tr>
        <td class="static">Staticdfxcvzx
        cvzxcvzxcv</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
      </tr>
      <tr>
        <td class="static">Static</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
      </tr>
      <tr>
        <td class="static">Static</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
      </tr>
      <tr>
        <td class="static">Static</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
      </tr>
    </tbody>
  </table>
</div>

CSS

table{
  width: 600px;
}

.static{
  border: 1px solid red;
  width: 100px;
  word-wrap: break-word;
}

.scroll{
  border: 1px solid green;
  width: 500px;
}

.wrap{
  border: 1px solid blue;
  width: 400px;
  overflow: scroll;
  position: relative;
}

JavaScript

$("div").scroll(function(){
    $('.static').css({
    "position": "absolute", "top": 0
    
    });
});