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

将表格包装成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

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

不知道这张表的位置，但我认为你应该使用100多行表的分页器...

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

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

3 个答案: