JSFiddle - React, Tailwind, and code Playground

HTML

Origin:
<table class='origin'>
  <tbody>
    <tr><td class='first'>0</td><td>1</td><td>2</td><td>3</td></tr>
    <tr><td class='first' rowspan='3'>0</td><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td class='first'>0</td><td>1</td><td>2</td><td>3</td></tr>
  </tbody>
</table>
Fixed column:
<table class='fixed'>
  <tbody>
    <tr><td class='first'>0</td><td>1</td><td>2</td><td>3</td></tr>
    <tr><td class='first' rowspan='3'>0</td><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td class='first'>0</td><td>1</td><td>2</td><td>3</td></tr>
  </tbody>
</table>

CSS

table td {
  border: 1px solid red;
  background: lightpink;
  min-width: 100px;
  max-width: 100px;
  width: 100px;
  height: 20px;
}

table.origin td.first:nth-child(1) {
  border: 1px solid blue;
  background: lightblue;
  width: 300px;
  min-width: 300px;
  max-width: 300px;
}

table.fixed td.first:nth-child(1) {
  border: 1px solid blue;
  background: lightblue;
  position: relative;
  display: block;
  width: 300px;
  min-width: 300px;
  max-width: 300px;
}

table tbody {
  position: relative;
  display: block; 
  overflow: scroll; 
  width: 500px;
}

table {
  position: relative;
  overflow: hidden; 
  border: 1px solid black;
}

JavaScript

$('tbody').scroll(function(e) { 
  $('.fixed td.first:nth-child(1)').css("left", $(".fixed tbody").scrollLeft());
});