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: /

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/j5Q4L/3/

• javascript
• jquery
• jquery-jtable

• 2 Have you got an answer to this question?Then plz do share...because iam also facing the same issue... :( – Mothy Commented Jan 23, 2014 at 6:35

3 Answers 3

$('.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!

  <style type="text/css">
        #StudentTableContainer {
            width: 100%;
            display: block;
        }

            #StudentTableContainer tbody, .jtable tbody {
                height: 100px;
                overflow-y: auto;
                display: block;
            }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#StudentTableContainer').jtable({
                //...
            });
        });
    </script>
    <div id="StudentTableContainer" class="jtable"></div>

Add this to css

table.jtable{
overflow-y: scroll;
display:block;
overflow-x: hidden;
}