How can I insert a scrollbar in jquery jtable?

Question

I am using the great jquery plugin jtable. But I can't find any examples showing a vertical scrollbar.

I tried setting a height and overflow.auto on the div that contains it - the scrollbar then scrolls the whole table including header - I only want to scroll the rows not the header and not the footer.

Has anyone found a way to do this?

A solution that works some way is inserting:

$('.jtable').wrap('<div class="jtable-main-container scroll-content" />');    

and

.scroll-content {
     overflow-y: auto;
    width:100%;
 }
div.jtable-main-container {
  height:100%;
}

And setting height on the div. However it also scrolls the table header - but it is better than scrolling the whole jtable - I tried to make a solution where jtable generates 2 tables - one with header and one with body but the header gets out of sync.

see it here: http://jsfiddle.net/j5Q4L/3/

Answer 1

$('.jtable').wrap('<div class="jtable-main-container scroll-content" />');    
and

.scroll-content {
     overflow-y: auto;
    width:100%;
 }
div.jtable-main-container {
  height:100%;
}

Thank you!