There is a table with vertical scrolling, you need to make it a fixed horizontal scroll.

<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>

http://jsfiddle.net/ZXnqM/4/

Now the scroll is only at the bottom of the table and to scroll to the right, you first need to scroll down

  • Uno momento, misʻe - Yuri

1 answer 1

We need to create another element with a scroll and add a script to 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 + $('.search-table').outerHeight() > $(window).height() + $(window).scrollTop()){ $('#w-scroll').css({top: $(window).height() + $(window).scrollTop() - 28, bottom: 'auto'}); }else{ $('#w-scroll').css({top: 'auto', bottom: 0}); }; }); $('#w-scroll').each(function() { if($('.search-table').offset().top + $('.search-table').outerHeight() > $(window).height() + $(window).scrollTop()){ $(this).css({top: $(window).height() + $(window).scrollTop() - 28, bottom: 'auto'}); }else{ $(this).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>