JSFiddle - React, Tailwind, and code Playground

by John Doe

HTML

<div class="fake-scroll">
    <div class="div1">
    </div>
</div>
<div class="table-scroll">
    <div class="div2">
    <table>
      <tr>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, labore fugit aliquam. Iure veritatis eveniet tempore assumenda quia, commodi dolores. Quaerat magni ratione pariatur cupiditate ducimus error facilis fuga nostrum!</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, labore fugit aliquam. Iure veritatis eveniet tempore assumenda quia, commodi dolores. Quaerat magni ratione pariatur cupiditate ducimus error facilis fuga nostrum!</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, labore fugit aliquam. Iure veritatis eveniet tempore assumenda quia, commodi dolores. Quaerat magni ratione pariatur cupiditate ducimus error facilis fuga nostrum!</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, labore fugit aliquam. Iure veritatis eveniet tempore assumenda quia, commodi dolores. Quaerat magni ratione pariatur cupiditate ducimus error facilis fuga nostrum!</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, labore fugit aliquam. Iure veritatis eveniet tempore assumenda quia, commodi dolores. Quaerat magni ratione pariatur cupiditate ducimus error facilis fuga nostrum!</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, labore fugit aliquam. Iure veritatis eveniet tempore assumenda quia, commodi dolores. Quaerat magni ratione pariatur cupiditate ducimus error facilis fuga nostrum!</td>
      </tr>
      <tr>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, labore fugit aliquam. Iure veritatis eveniet tempore assumenda quia, commodi dolores. Quaerat magni ratione pariatur cupiditate ducimus error facilis fuga nostrum!</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, labore...

CSS

.fake-scroll, .table-scroll{width: 300px; border: none 0px RED;
overflow-x: scroll; overflow-y:hidden;}
.fake-scroll{height: 20px; }
.table-scroll{height: 200px; }
.div1 {width:1000px; height: 20px; }
.div2 {width:1000px; height: 200px; background-color: #88FF88;
overflow: auto;}

JavaScript

$(function(){
    $(".fake-scroll").scroll(function(){
        $(".table-scroll")
            .scrollLeft($(".fakescroll").scrollLeft());
    });
    $(".table-scroll").scroll(function(){
        $(".fake-scroll")
            .scrollLeft($(".table-scroll").scrollLeft());
    });
});