JSFiddle - React, Tailwind, and code Playground

by AJIEKCEU

HTML

<div id="scroll1" style="overflow-x:auto;">
<div></div>
</div>
<div id="scroll2" style="overflow-x:auto;">

<table id="select" class="info">
<thead>
<tr class="row">
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>

<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
<th>10</th>

<th>11</th>
<th>12</th>
<th>13</th>
<th>14</th>
<th>15</th>

<th>16</th>
<th>17</th>
<th>18</th>
<th>19</th>
<th>20</th>
</tr>
</thead>

<tbody>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
<td>content 5</td>

<td>content 6</td>
<td>content 7</td>
<td>content 8</td>
<td>content 9</td>
<td>content 10</td>

<td>content 11</td>
<td>content 12</td>
<td>content 12</td>
<td>content 14</td>
<td>content 15</td>

<td>content 16</td>
<td>content 17</td>
<td>content 18</td>
<td>content 19</td>
<td>content 20</td>
</tbody>
</table>

</div>

CSS

table.info {
    width: 98%;
    margin: 0 1%;
    border-collapse: collapse;
    }
.row {
    background:#CCC;
    }
  
td {
    white-space: nowrap;
}
#scroll1 div {
    height: 1px;
    margin: 0 1%;
}

JavaScript

$("document").ready(function(){
    $("#scroll1 div").width($("#select").width());
    $("#scroll1").on("scroll", function(){
        $("#scroll2").scrollLeft($(this).scrollLeft()); 
    });
    $("#scroll2").on("scroll", function(){
        $("#scroll1").scrollLeft($(this).scrollLeft()); 
    });
});