Can you have scrollbars in both parallel sides of a div?

Question

I have this table with a lot of columns so I put it inside a div with overflow:auto thus enabling horizontal scrolling. The scrollbar is positioned at the bottom of the div. My question is: can you have 2 scrollbars, one at the bottom of the div and another one at the top of the div? If yes, how can you achieve that?

Answer 1

Your answer can be found here: horizontal scrollbar on top and bottom of table

Here's a fiddle of what you need: http://jsfiddle.net/TBnqw/1/

And here's the code:

HTML:

    <div class="wrapper1">
      <div class="div1"></div>
    </div>
    <div class="wrapper2">
      <div class="div2">
        <!-- Content Here -->
      </div>
    </div>

CSS:

    .wrapper1, .wrapper2 {
      width: 300px;
      overflow-x: scroll;
      overflow-y:hidden;
    }

    .wrapper1 {height: 20px; }
    .wrapper2 {height: 200px; }

    .div1 {
      width:1000px;
      height: 20px;
    }

    .div2 {
      width:1000px;
      height: 200px;
      background-color: #88FF88;
      overflow: auto;
    }

JS:

    $(function(){
      $(".wrapper1").scroll(function(){
        $(".wrapper2").scrollLeft($(".wrapper1").scrollLeft());
      });
      $(".wrapper2").scroll(function(){
        $(".wrapper1").scrollLeft($(".wrapper2").scrollLeft());
      });
    });