Categories
css html javascript jquery

horizontal scrollbar on top and bottom of table

196

I’ve a very large table on my page. So I decided to put a horizontal scrollbar on the bottom of the table. But I would like this scrollbar to be also on top on the table.

What I have in the template is this:

<div style="overflow:auto; width:100%; height:130%">
<table id="data" style="width:100%">...</table>
</div>

Is this possible to do in HTML and CSS only?

5

  • 1

    stackoverflow.com/questions/2274627/… I found this solution useful.

    Apr 6, 2015 at 10:17

  • Yes. stackoverflow.com/questions/18997724/…

    Dec 21, 2016 at 15:41

  • 1

    Modern suggestion: Make a “remote-control-scrollbar” component in your preferred framework (React, Vue, etc). You feed it one prop, the id of scrollable content, for example: <MyScrollbar :sourceTarget="myOrigScrollableArea"> and within the component you monitor the target and make appropriate changes to the custom scrollbar. Then whatever happens in the original scrollable area is dynamically reflected in the scrollbar component. Now you can copy-paste that component instance and create 100 scroll bars if you wish, in any orientation.

    Mar 3 at 15:52


  • @VARSHADAS, the user is asking if it’s possible in HTML and CSS only.

    – Pere

    Jun 9 at 13:42

  • @SpencerMay, the user is asking for a scroll bar on both top and bottom of the table.

    – Pere

    Jun 9 at 13:42

259

To simulate a second horizontal scrollbar on top of an element, put a “dummy” div above the element that has horizontal scrolling, just high enough for a scrollbar. Then attach handlers of the “scroll” event for the dummy element and the real element, to get the other element in synch when either scrollbar is moved. The dummy element will look like a second horizontal scrollbar above the real element.

For a live example, see this fiddle

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());
  });
});

10

  • 1

    Did you get it to work? For more on jQuery, see api.jquery.com/scrollLeft (Of course, you can do it without jQuery by attaching onscroll handlers directly.) For graceful degradation for users with no JS, you can add the dummy div to the DOM by JS.

    – StanleyH

    Oct 15, 2010 at 7:21

  • 1

    yes I got it to work, I had only add <script type=”text/javascript” src=”path”></script> to <head>. So everytime I add jquery I had to add the one that @fudgey add? Sorry, javascript and jquery are still kind of chinese to me

    – psoares

    Oct 15, 2010 at 9:11

  • 4

    @StanleyH : how to set the div to automatically take the width of the table inside it ? i don’t want to specify the width of div2 manually, but want it to automatically take the width of table which it contains.

    – sqlchild

    May 12, 2014 at 7:51

  • 4

    @CodyGuldner : how to set the div to automatically take the width of the table inside it ? i don’t want to specify the width of div2 manually, but want it to automatically take the width of table which it contains.

    – sqlchild

    May 12, 2014 at 9:18

  • 2

    .wrapper1 scroll() calls .wrapper2 scroll(), then .wrapper2 scroll() calls .wrapper1 scroll(), then .wrapper1 scroll() calls .wrapper2 scroll() again, and then….hrm, is this not an infinite loop?

    Jun 7, 2019 at 15:53

42

Try using the jquery.doubleScroll plugin :

jQuery :

$(document).ready(function(){
  $('#double-scroll').doubleScroll();
});

CSS :

#double-scroll{
  width: 400px;
}

HTML :

<div id="double-scroll">
  <table id="very-wide-element">
    <tbody>
      <tr>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>

3

41

Solution only using CSS

There is one way to achieve this that I did not see anybody mentioning here.

By rotating the parent container by 180 degrees and the child-container again by 180 degrees the scrollbar will be shown at top

.parent {
  transform: rotateX(180deg);
  overflow-x: auto;
} 
.child {
  transform: rotateX(180deg);
}

For reference see the issue in the w3c repository.

3

  • 10

    it’s a really nice solution if you only have a horizontal scroll, but if you have a vertical too, the vertical scroll is backwards (drag up to scroll down etc.).

    – Alex L

    Oct 11, 2020 at 19:33

  • 1

    The question is how to have scrollbar on top and bottom, both at the same time. But nice solution tho.

    – MichalCh

    Feb 9 at 14:36

  • In this way only top scrollbar is shown…the question ask for both

    – JEricaM

    May 17 at 10:54