This question has already been answered:

There is a huge html table with horizontal scrolling made using bootstrap .table-responsive . The table is long, and in order to move it left and right, you have to turn it all the way down to the scroll, which is not very convenient. Is it possible to attach a scroll to the bottom of the browser window so that it is always visible? PS No footer, the table ends the screen.

Reported as a duplicate member of the Spirit of the Community ♦ Dec 18 '16 at 8:00 .

A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .

    1 answer 1

    You need to create another element with a scroll and make a script into it: http://jsfiddle.net/ZXnqM/324/

     $(function() { $('#w-scroll .scroll').css({width: $('.search-table').outerWidth()}); $('#w-scroll').scroll(function() { $('.search-table-outter').scrollLeft($(this).scrollLeft()); $(this).css({left: $(this).scrollLeft()}); }); $(window).scroll(function() { if($('.search-table').offset().top > $(window).scrollTop() + $(window).height() + 22){ $('#w-scroll').css({top: 0, bottom: 'auto'}); }else if($('.search-table').offset().top + $('.search-table').outerHeight() > $(window).height() + $(window).scrollTop()){ $('#w-scroll').css({top: $(window).height() + $(window).scrollTop() - $('.search-table').offset().top + 22, bottom: 'auto'}); }else{ $('#w-scroll').css({top: 'auto', bottom: 0}); }; }); $('#w-scroll').each(function() { if($('.search-table').offset().top > $(window).scrollTop() + $(window).height() + 22){ $('#w-scroll').css({top: 0, bottom: 'auto'}); }else if($('.search-table').offset().top + $('.search-table').outerHeight() > $(window).height() + $(window).scrollTop()){ $('#w-scroll').css({top: $(window).height() + $(window).scrollTop() - $('.search-table').offset().top + 22, bottom: 'auto'}); }else{ $('#w-scroll').css({top: 'auto', bottom: 0}); }; }); }); 
     .search-table-outter {border:2px solid red; overflow-x:hidden;position:relative;} .search-table{table-layout: fixed; margin:40px auto 0px auto;} .search-table, td, th{border-collapse:collapse; border:1px solid #777;} th{padding:20px 7px; font-size:15px; color:#444; background:#66C2E0;} td{padding:5px 10px; height:35px;} #w-scroll {position:absolute;width:100%;height:auto;overflow-x:scroll} #w-scroll .scroll {height:1px;} 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="search-table-outter wrapper"> <table class="search-table inner"> <tr> <th>Col1</th> <th>Col2</th> <th>Col3</th> <th>Col4</th> <th>Col5</th> <th>Col6</th> <th>Col7</th> <th>Col8</th> <th>Col9</th> <th>Col10</th> </tr> <tr> <td><a href="#">The brown fox is mad jumping all over the place for no reason </a></td> <td>The brown fox is mad jumping all over the place for no reason </td> <td>The brown fox is mad jumping all over the place for no reason </td> <td>The brown fox is mad jumping all over the place for no reason </td> <td>The brown fox is mad jumping all over the place for no reason </td> <td>The brown fox is mad jumping all over the place for no reason </td> <td>The brown fox is mad jumping all over the place for no reason </td> <td>The brown fox is mad jumping all over the place for no reason </td> <td>The brown fox is mad jumping all over the place for no reason </td> <td>The brown fox is mad jumping all over the place for no reason </td> </tr> <tr> <td><a href="#">The brown fox is mad jumping all over the place for no reason </a></td> <td>The brown fox is mad jumping all over the place for no reason </td> <td>The brown fox is mad jumping all over the place for no reason </td> <td>The brown fox is mad jumping all over the place for no reason </td> <td>The brown fox is mad jumping all over the place for no reason </td> <td>The brown fox is mad jumping all over the place for no reason </td> <td>The brown fox is mad jumping all over the place for no reason </td> <td>The brown fox is mad jumping all over the place for no reason </td> <td>The brown fox is mad jumping all over the place for no reason </td> <td>The brown fox is mad jumping all over the place for no reason </td> </tr> <tr> <td><a href="#">The brown fox is mad jumping all over the place for no reason </a></td> <td>The brown fox is mad jumping all over the place for no reason </td> <td>The brown fox is mad jumping all over the place for no reason </td> <td>The brown fox is mad jumping all over the place for no reason </td> <td>The brown fox is mad jumping all over the place for no reason </td> <td>The brown fox is mad jumping all over the place for no reason </td> <td>The brown fox is mad jumping all over the place for no reason </td> <td>The brown fox is mad jumping all over the place for no reason </td> <td>The brown fox is mad jumping all over the place for no reason </td> <td>The brown fox is mad jumping all over the place for no reason </td> </tr> </table> <div id="w-scroll"><div class="scroll"></div></div> </div>