Skip to content

Double Horizontal Scroll on Table – JQuery

I am trying to add double horizontal scrolls – one above the table and one below it. The table “MUST be based on percentage” and not a fixed width. How do I accomplish this with JQuery?

I need the table to span 100 percent width and have 2 scrollbars that are synced. With alot of content, the bottom scrollbar gets lost from the user…



 <div style="overflow-x:auto;">
 <table id="select" class="info">
     <tr class="row">
       <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>

     width: 98%;
     margin: 0 1%;
     border-collapse: collapse;
 .row {
 td {
     white-space: nowrap;


Add one more div with horizontal scroll:

<div id="scroll1" style="overflow-x:auto;">
    <div style="height: 1px;margin: 0 1%;"></div>

Then synchronize both scroll events via jQuery.

    $("#scroll1 div").width($("#select").width());
    $("#scroll1").on("scroll", function(){
    $("#scroll2").on("scroll", function(){

Here is my jsFiddle example