javascript - 如何在 jquery jtable 中插入滚动条？

Question

我正在使用很棒的 jquery 插件jtable。但我找不到任何显示垂直滚动条的示例。

我尝试在包含它的 div 上设置 height 和 overflow.auto - 滚动条然后滚动整个表格，包括页眉 - 我只想滚动行而不是页眉而不是页脚。

有没有人找到办法做到这一点？

以某种方式起作用的解决方案是插入：

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

和

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

并在 div 上设置高度。然而，它也滚动表头 - 但它比滚动整个 jtable 更好 - 我试图制作一个解决方案，其中 jtable 生成 2 个表 - 一个带有标题，一个带有正文，但标题不同步。

在这里看到它：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%;
}

谢谢！

Answer 2

将此添加到 css

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

Answer 3

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