horizontal scrollbar on top and bottom of table

Question

Hi!

I've a table that is very large. So I decided to put a horizontal scrollbar that is placed 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%">

Is this possible to do in html? Or I have to try javascript or jquery?

Thank you!

Answer 1

As far as I'm aware this isn't possible with HTML and CSS.

Answer 2

Have you tried just making the <tbody> scroll?

CSS

#data { width: 99%; }
#data tbody { height: 500px; overflow: scroll; }

HTML

<table id="data">
 <thead> <!-- this part doesn't scroll with the tbody -->
  <tr>...</tr>
 </thead>
 <tbody>
 ...
 </tbody>
 <tfoot> <!-- this part doesn't scroll with the tbody -->
  <tr>...</tr>
 </tfoot>
</table>

Answer 3

Here's how 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: http://jsfiddle.net/TBnqw/1/

Here's the code:

HTML:

<div class="wrapper1">
<div class="div1">
</div>
</div>
<div class="wrapper2">
<div class="div2">
aaaa bbbb cccc dddd aaaa bbbb cccc dddd aaaa bbbb cccc dddd aaaa bbbb cccc dddd aaaa bbbb cccc dddd aaaa bbbb cccc dddd aaaa bbbb cccc dddd
</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());
});
});