JSFiddle - React, Tailwind, and code Playground

by Amin Kodaganur

HTML

<div>
  <table>
    <tr>
      <td>
        <div style="width:400px;overflow:auto">
          <table class="firstTable table-auto-scroll">
            <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>
  ...

CSS

* {
  box-sizing: border-box;
}

html {
  font-family: verdana;
  font-size: 10pt;
  line-height: 25px;
}

.firstTable {
  border-collapse: collapse;
  width: 100%;
  overflow-x: scroll;
  display: block;
}

.firstTable thead {
  background-color: #EFEFEF;
}

.firstTable thead,
tbody {
  display: block;
}

.firstTable tbody {
  overflow-y: scroll;
  overflow-x: hidden;
  height: 240px;
}

.firstTable td,
th {
  min-width: 100px;
  height: 25px;
  border: dashed 1px lightblue;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}

.secondTable {
  border-collapse: collapse;
  width: 100%;
  overflow-x: scroll;
  display: block;
}

.secondTable thead {
  background-color: #EFEFEF;
}

.secondTable thead,
tbody {
  display: block;
}

.secondTable tbody {
  overflow-y: scroll;
  overflow-x: hidden;
  height: 240px;
}

.secondTable td,
th {
  min-width: 100px;
  height: 25px;
  border: dashed 1px lightblue;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}

.middleTable {
  border-collapse: collapse;
  width: 100%;
  overflow-x: scroll;
  display: block;
}

.middleTable thead {
  background-color: #EFEFEF;
}

.middleTable thead,
tbody {
  display: block;
}

.middleTable tbody {
  overflow-y: scroll;
  overflow-x: hidden;
  height: 240px;
}

.middleTable td,
th {
  min-width: 100px;
  height: 25px;
  border: dashed 1px lightblue;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}

JavaScript

var ignoreEvent = false;

$(".table-auto-scroll").on('scroll', function (e) {
    if (!ignoreEvent) {
        setTimeout(function() {
            ignoreEvent = true;
            table1.scrollTop = e.scrollTop;
            table2.scrolLTop = e.scrollTop;
        }, 100);
    }

    ignoreEvent = false;
    return false; // cancels the original scroll event.
});