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

Question

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

如何将 tbody 高度设置为固定值。还允许垂直滚动（溢出-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

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

不知道这张表会在哪里，但我认为您应该为 100 多行表使用分页器...

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

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

只需将表格包装成一个 div ：

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

把css放到一个class里面，给容器div添加一个class