JSFiddle - React, Tailwind, and code Playground

by Amin Kodaganur

HTML

<div class="auto-scroll auto-left-scroll">
    <table>
            <thead>
              <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
                <th>Column 4</th>
                <th>Column 5</th>
                <th>Column 6</th>
                <th>Column 7</th>
                <th>Column 8</th>
                <th>Column 9</th>
                <th>Column 10</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Row 1</td>
                <td>Row 1</td>
                <td>Row 1</td>
                <td>Row 1</td>
                <td>Row 1</td>
                <td>Row 1</td>
                <td>Row 1</td>
                <td>Row 1</td>
                <td>Row 1</td>
                <td>Row 1</td>
              </tr>
              <tr>
                <td>Row 1</td>
                <td>Row 1</td>
                <td>Row 1</td>
                <td>Row 1</td>
                <td>Row 1</td>
                <td>Row 1</td>
                <td>Row 1</td>
                <td>Row 1</td>
                <td>Row 1</td>
                <td>Row 1</td>
              </tr>
              <tr>
                <td>Row 1</td>
                <td>Row 1</td>
                <td>Row 1</td>
                <td>Row 1</td>
                <td>Row 1</td>
                <td>Row 1</td>
                <td>Row 1</td>
                <td>Row 1</td>
                <td>Row 1</td>
                <td>Row 1</td>
              </tr>
              <tr>
                <td>Row 1</td>
                <td>Row 1</td>
                <td>Row 1</td>
                <td>Row 1</td>
                <td>Row 1</td>
                <td>Row 1</td>
                <td>Row 1</td>
                <td>Row 1</td>
                <td>Row 1</td>
                <td>Row 1</td>
              </tr>
              <tr>
                <td>Row 1</td>
                <td>Row 1</td>
                <td>Row...

CSS

div {
    display:inline-block;
    height:200px;
    width:300px;
    overflow:auto;
    overflow-x: scroll;
}
div.middel{
  width: 100px;
}
div.last-table{
  direction: rtl;
}

JavaScript

$(".auto-scroll").on("scroll",function(){
    $(".auto-scroll:not(this)").scrollTop($(this).scrollTop());
    /* $(".auto-scroll:not(this)").scrollLeft($(this).scrollLeft()) */;
});
var maxRightScroll = $(".auto-right-scroll").scrollLeft();
$(".auto-left-scroll").on("scroll",function(e){
    e.preventDefault();
    $(".auto-right-scroll").unbind("scroll");
    $(".auto-right-scroll:not(this)").scrollLeft(maxRightScroll - $(this).scrollLeft());
}); 

  /* var maxLeftScroll = $(".auto-left-scroll").innerWidth();
  $(".auto-right-scroll").on("scroll",function(e){
      e.preventDefault();
      $(".auto-left-scroll:not(this)").scrollLeft(maxLeftScroll - $(this).scrollLeft()); 
    });  */