JSFiddle - React, Tailwind, and code Playground
HTML
<div class="stickyCol2">
<div class="ui-datatable-tablewrapper">
<table>
<thead>
<tr>
<th scope="col">header</th>
<th scope="col">header</th>
<th scope="col">header</th>
<th scope="col">header</th>
<th scope="col">header</th>
<th scope="col">header</th>
<th scope="col">header</th>
<th scope="col">header</th>
<th scope="col">header</th>
<th scope="col">header</th>
<th scope="col">header</th>
<th scope="col">header</th>
<th scope="col">header</th>
<th scope="col">header</th>
<th scope="col">header</th>
<th scope="col">header</th>
<th scope="col">header</th>
<th scope="col">header</th>
<th scope="col">header</th>
<th scope="col">header</th>
<th scope="col">header</th>
<th scope="col">header</th>
<th scope="col">header</th>
<th scope="col">header</th>
<th scope="col">header</th>
<th scope="col">header</th>
<th scope="col">header</th>
<th scope="col">header</th>
<th scope="col">header</th>
</tr>
</thead>
<tbody>
<tr>
<td role="gridcell">data</td>
<td role="gridcell">data</td>
<td role="gridcell">data</td>
<td role="gridcell">data</td>
<td role="gridcell">data</td>
<td role="gridcell">data</td>
<td role="gridcell">data</td>
<td role="gridcell">data</td>
<td role="gridcell">data</td>
<td role="gridcell">data</td>
<td role="gridcell">data</td>
<td role="gridcell">data</td>
<td...
CSS
.stickyCol2 table {
margin-left: 115px;
margin-bottom: 20px;
}
.stickyCol2 tr th:nth-child(1),.stickyCol2 tr td:nth-child(1) {
position: absolute;
width: 50px;
left: 15px;
top: auto;
background-color: #fff;
}
.stickyCol2 tr th:nth-child(2),
.stickyCol2 tr td:nth-child(2) {
position: absolute;
width: 60px;
left: 65px;
top: auto;
background-color: #fff;
}
.ui-datatable-tablewrapper {
overflow: auto;
}