JSFiddle - React, Tailwind, and code Playground

by John Doe

HTML

<div class="fake-scroll">
    <div class="div1">
    </div>
</div>
<div class="table-scroll">
 
    <table>
      <tr>
        <td>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam facere cumque iste nesciunt soluta similique accusamus ratione, nemo magnam assumenda obcaecati, est alias qui ipsa libero aliquid sapiente, nihil velit!
        </td>
        <td>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam facere cumque iste nesciunt soluta similique accusamus ratione, nemo magnam assumenda obcaecati, est alias qui ipsa libero aliquid sapiente, nihil velit!
        </td>
        <td>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam facere cumque iste nesciunt soluta similique accusamus ratione, nemo magnam assumenda obcaecati, est alias qui ipsa libero aliquid sapiente, nihil velit!
        </td>
        <td>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam facere cumque iste nesciunt soluta similique accusamus ratione, nemo magnam assumenda obcaecati, est alias qui ipsa libero aliquid sapiente, nihil velit!
        </td>
        <td>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam facere cumque iste nesciunt soluta similique accusamus ratione, nemo magnam assumenda obcaecati, est alias qui ipsa libero aliquid sapiente, nihil velit!
        </td>
        <td>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam facere cumque iste nesciunt soluta similique accusamus ratione, nemo magnam assumenda obcaecati, est alias qui ipsa libero aliquid sapiente, nihil velit!
        </td>
        <td>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam facere cumque iste nesciunt soluta similique accusamus ratione, nemo magnam assumenda obcaecati, est alias qui ipsa libero aliquid sapiente, nihil velit!
        </td>
        <td>
          Lorem ipsum dolor sit amet, consectetur adipisicing...

CSS

.fake-scroll, .table-scroll{
overflow-x: scroll; overflow-y:hidden;}
.fake-scroll{height: 20px; }
.table-scroll{height: 200px; }
.div1 {width:1000px; height: 20px; }


table td{
  width: 300px;
}

JavaScript

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