JSFiddle - React, Tailwind, and code Playground
HTML
<div class=grid>
<table>
<tr>
<td>ASDF</td>
<td>ASDF</td>
<td>ASDF</td>
<td>ASFf</td>
<td>ACED</td>
<td>AWDD</td>
<td>7AWD</td>
<td>8VAW</td>
</tr>
<tr>
<td>ASDF</td>
<td>ASDF</td>
<td>ASDF</td>
<td>ASFf</td>
<td>ACED</td>
<td>AWDD</td>
<td>7AWD</td>
<td>8VAW</td>
</tr>
<tr>
<td>ASDF</td>
<td>ASDF</td>
<td>ASDF</td>
<td>ASFf</td>
<td>ACED</td>
<td>AWDD</td>
<td>7AWD</td>
<td>8VAW</td>
</tr>
<tr>
<td>ASDF</td>
<td>ASDF</td>
<td>ASDF</td>
<td>ASFf</td>
<td>ACED</td>
<td>AWDD</td>
<td>7AWD</td>
<td>8VAW</td>
</tr>
<tr>
<td>ASDF</td>
<td>ASDF</td>
<td>ASDF</td>
<td>ASFf</td>
<td>ACED</td>
<td>AWDD</td>
<td>7AWD</td>
<td>8VAW</td>
</tr>
<tr>
<td>ASDF</td>
<td>ASDF</td>
<td>ASDF</td>
<td>ASFf</td>
<td>ACED</td>
<td>AWDD</td>
<td>7AWD</td>
<td>8VAW</td>
</tr>
<tr>
<td>ASDF</td>
<td>ASDF</td>
<td>ASDF</td>
<td>ASFf</td>
<td>ACED</td>
<td>AWDD</td>
<td>7AWD</td>
<td>8VAW</td>
</tr>
<tr>
<td>ASDF</td>
<td>ASDF</td>
<td>ASDF</td>
<td>ASFf</td>
<td>ACED</td>
<td>AWDD</td>
<td>7AWD</td>
<td>8VAW</td>
</tr>
</table>
</div>
<div...
CSS
.grid{
width:200px;
overflow:hidden;
position:relative;
}
.scroller{
width:200px;
overflow-x:auto;
color:red;
}
JavaScript
var gridBlock = jQuery('.grid>table')[0];
jQuery('.scroller').scroll(function(){
var offset = this.scrollLeft;
gridBlock.style.marginLeft = (-offset) + 'px';
});