<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>4 Sides Scrolling</h2> <br> <div class="leftscroll"> <div class="div1"></div> </div> <div class="wrapper1"> <div class="div3" > </div> </div> <div class="main wrapper2" style="margin:auto;"> <div class="div2 div4"> <table class="table" border="1" width="80%" style="margin: auto;"> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> <tr> <td>Ernst Handel</td> <td>Roland Mendel</td> <td>Austria</td> </tr> <tr> <td>Island Trading</td> <td>Helen Bennett</td> <td>UK</td> </tr> <tr> <td>Laughing Bacchus Winecellars</td> <td>Yoshi Tannamuri</td> <td>Canada</td> </tr> <tr> <td>Magazzini Alimentari Riuniti</td> <td>Giovanni Rovelli</td> <td>Italy</td> </tr> <tr> <td>Laughing Bacchus Winecellars</td> <td>Yoshi Tannamuri</td> <td>Canada</td> </tr> <tr> <td>Magazzini Alimentari Riuniti</td> <td>Giovanni Rovelli</td> <td>Italy</td> </tr> <tr> <td>Laughing Bacchus Winecellars</td> <td>Yoshi Tannamuri</td> <td>Canada</td> </tr> <tr> <td>Magazzini Alimentari Riuniti</td> <td>Giovanni Rovelli</td> <td>Italy</td> </tr> </table> </div> </div> </div> </div>

.main{ height:200px; overflow-x:scroll; } .div2{ height : 210px; } .leftscroll{ position : absolute; top : 95px; left : 247px; width : 17px; height : 265px; overflow-y : scroll; } @media only screen and (max-width:768px) { .leftscroll{ position : absolute; top : 99px; left : 32px; width : 17px; height : 265px; overflow-y : scroll; } } .div1{ width : 17px; height : 830px; } .wrapper1, .wrapper2{ width: 70%; border: none 0px RED; overflow-x: scroll; } .wrapper1{ height: 20px; margin: auto; } .wrapper2{ height: 260px; } .div3 { width:1300px; height: 20px; } .div4 { width:1300px; height: 800px; background-color: #ffff; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script> $(document).ready( function() { $('.main').on('scroll', function () { $('.leftscroll').scrollTop($(this).scrollTop()); $('#topmenu').scrollLeft($(this).scrollLeft()); }); $('.leftscroll').scroll(function () { $('.main').scrollTop($(this).scrollTop()); }); }); </script> <script> $(function(){ $(".wrapper1").scroll(function(){ $(".wrapper2") .scrollLeft($(".wrapper1").scrollLeft()); }); $(".wrapper2").scroll(function(){ $(".wrapper1") .scrollLeft($(".wrapper2").scrollLeft()); }); }); </script>