Jquery 表:自定义 seanmacisaac 表/将 tbody 插入 div

Question

我正在尝试调整由seanmacisaac设置的Jquery可排序，可搜索的表参考： http://www.seanjmacisaac.com/projects/code/tablesort/#index-member-4

如何将主体高度设置为固定值。还允许垂直滚动（溢出-y）？

<table class="table-sort table-sort-search table-sort-show-search-count">
<thead>
<tr><th class="table-sort">head1</th><th class="table-sort">head2</th><th class="table-sort">head3</th></tr>
</thead>
<tbody>
<tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
<tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
<tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
<tr><td>4-1</td><td>4-2</td><td>4-3</td></tr>
</tbody>
</table>

Answer 1

只需将表格包装成div ：

<div style="overflow:auto;height:500px;width:100%">
    <table></table> // with any number of row
</div>

将 css 放入一个类中，并将一个类添加到容器div

Answer 2

如果您只想滚动表格的数据部分而不使用标题，那么您应该像这样制作 html：

<div class="header-table" style="width:100%">
<table class="header"></table>
</div>
<div class="table-data" style="overflow:auto;height:500px;width:100%">
<table class="data"></table>
</div>

Answer 3

如果您想在

滚动时保持标题固定，对于简单的表，我创建了一个单独的表：第一个用于标题，第二个在具有固定高度和溢出-y：auto的div 中，仅用于 tbody。不是那么优雅，但只是做工作。

不知道这个表会在哪里，但我认为你应该对 100+ 行表使用分页器......

如果问题是对数据进行排序和分页，我会给jqGrid一个机会：http://trirand.com/blog/jqgrid/jqgrid.html