我有一个包含大量列的巨大表，它被插入到一个div元素中，overflow属性设置为auto。我正在使用StickyHeaders小部件（一个@Mottie为fork of TableSorter插件开发的小部件），无法使StickyHeaders与表体一起滚动。
HTML格式
<div style="overflow-y:auto">
<table class="tablesorter">
<thead>
<tr>
<th>Row ID</th>
<th>AlphaNumeric</th>
<th>Numeric</th>
<th>Numeric</th>
<th>Numeric</th>
<th>Numeric</th>
<th>Numeric</th>
<th>Numeric</th>
<th>Animals</th>
<th>Sites</th>
</tr>
</thead>
<tbody>
<tr>
<td>row1</td>
<td>abc 123</td>
<td>10</td>
<td>Koala</td>
<td>http://www.google.com</td>
</tr>
<tr>
<td>row2</td>
<td>abc 1</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>Ox</td>
<td>http://www.yahoo.com</td>
</tr>
<tr>
<td>row3</td>
<td>abc 9</td>
<td>10</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>Girafee</td>
<td>http://www.facebook.com</td>
</tr>
<tr>
<td>row4</td>
<td>zyx 24</td>
<td>767</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>Bison</td>
<td>http://www.whitehouse.gov/</td>
</tr>
<tr>
<td>row5</td>
<td>abc 11</td>
<td>3</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>Chimp</td>
<td>http://www.ucla.edu/</td>
</tr>
<tr>
<td>row6</td>
<td>abc 2</td>
<td>56</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>Elephant</td>
<td>http://www.wikipedia.org/</td>
</tr>
<tr>
<td>row7</td>
<td>abc 9</td>
<td>155</td>
<td>Lion</td>
<td>http://www.nytimes.com/</td>
</tr>
<tr>
<td>row8</td>
<td>ABC 10</td>
<td>87</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>Zebra</td>
<td>http://www.google.com</td>
</tr>
<tr>
<td>row9</td>
<td>zyx 1</td>
<td>999</td>
<td>Koala</td>
<td>http://www.mit.edu/</td>
</tr>
<tr>
<td>row10</td>
<td>zyx 12</td>
<td>0</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>Llama</td>
<td>http://www.nasa.gov/</td>
</tr>
<tr>
<td>row1</td>
<td>abc 123</td>
<td>10</td>
<td>Koala</td>
<td>http://www.google.com</td>
</tr>
<tr>
<td>row2</td>
<td>abc 1</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>Ox</td>
<td>http://www.yahoo.com</td>
</tr>
<tr>
<td>row3</td>
<td>abc 9</td>
<td>10</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>Girafee</td>
<td>http://www.facebook.com</td>
</tr>
<tr>
<td>row4</td>
<td>zyx 24</td>
<td>767</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>Bison</td>
<td>http://www.whitehouse.gov/</td>
</tr>
<tr>
<td>row5</td>
<td>abc 11</td>
<td>3</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>Chimp</td>
<td>http://www.ucla.edu/</td>
</tr>
<tr>
<td>row6</td>
<td>abc 2</td>
<td>56</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>Elephant</td>
<td>http://www.wikipedia.org/</td>
</tr>
<tr>
<td>row7</td>
<td>abc 9</td>
<td>155</td>
<td>Lion</td>
<td>http://www.nytimes.com/</td>
</tr>
<tr>
<td>row8</td>
<td>ABC 10</td>
<td>87</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>Zebra</td>
<td>http://www.google.com</td>
</tr>
<tr>
<td>row9</td>
<td>zyx 1</td>
<td>999</td>
<td>Koala</td>
<td>http://www.mit.edu/</td>
</tr>
<tr>
<td>row10</td>
<td>zyx 12</td>
<td>0</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>Llama</td>
<td>http://www.nasa.gov/</td>
</tr>
<tr>
<td>row1</td>
<td>abc 123</td>
<td>10</td>
<td>Koala</td>
<td>http://www.google.com</td>
</tr>
<tr>
<td>row2</td>
<td>abc 1</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>Ox</td>
<td>http://www.yahoo.com</td>
</tr>
<tr>
<td>row3</td>
<td>abc 9</td>
<td>10</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>Girafee</td>
<td>http://www.facebook.com</td>
</tr>
<tr>
<td>row4</td>
<td>zyx 24</td>
<td>767</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>Bison</td>
<td>http://www.whitehouse.gov/</td>
</tr>
<tr>
<td>row5</td>
<td>abc 11</td>
<td>3</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>Chimp</td>
<td>http://www.ucla.edu/</td>
</tr>
<tr>
<td>row6</td>
<td>abc 2</td>
<td>56</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>Elephant</td>
<td>http://www.wikipedia.org/</td>
</tr>
<tr>
<td>row7</td>
<td>abc 9</td>
<td>155</td>
<td>Lion</td>
<td>http://www.nytimes.com/</td>
</tr>
<tr>
<td>row8</td>
<td>ABC 10</td>
<td>87</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>Zebra</td>
<td>http://www.google.com</td>
</tr>
<tr>
<td>row9</td>
<td>zyx 1</td>
<td>999</td>
<td>Koala</td>
<td>http://www.mit.edu/</td>
</tr>
<tr>
<td>row10</td>
<td>zyx 12</td>
<td>0</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>Llama</td>
<td>http://www.nasa.gov/</td>
</tr>
<tr>
<td>row1</td>
<td>abc 123</td>
<td>10</td>
<td>Koala</td>
<td>http://www.google.com</td>
</tr>
<tr>
<td>row2</td>
<td>abc 1</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>Ox</td>
<td>http://www.yahoo.com</td>
</tr>
<tr>
<td>row3</td>
<td>abc 9</td>
<td>10</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>Girafee</td>
<td>http://www.facebook.com</td>
</tr>
<tr>
<td>row4</td>
<td>zyx 24</td>
<td>767</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>Bison</td>
<td>http://www.whitehouse.gov/</td>
</tr>
<tr>
<td>row5</td>
<td>abc 11</td>
<td>3</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>Chimp</td>
<td>http://www.ucla.edu/</td>
</tr>
<tr>
<td>row6</td>
<td>abc 2</td>
<td>56</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>Elephant</td>
<td>http://www.wikipedia.org/</td>
</tr>
<tr>
<td>row7</td>
<td>abc 9</td>
<td>155</td>
<td>Lion</td>
<td>http://www.nytimes.com/</td>
</tr>
<tr>
<td>row8</td>
<td>ABC 10</td>
<td>87</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>Zebra</td>
<td>http://www.google.com</td>
</tr>
<tr>
<td>row9</td>
<td>zyx 1</td>
<td>999</td>
<td>Koala</td>
<td>http://www.mit.edu/</td>
</tr>
<tr>
<td>row10</td>
<td>zyx 12</td>
<td>0</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>Llama</td>
<td>http://www.nasa.gov/</td>
</tr>
<tr>
<td>row1</td>
<td>abc 123</td>
<td>10</td>
<td>Koala</td>
<td>http://www.google.com</td>
</tr>
<tr>
<td>row2</td>
<td>abc 1</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>Ox</td>
<td>http://www.yahoo.com</td>
</tr>
<tr>
<td>row3</td>
<td>abc 9</td>
<td>10</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>Girafee</td>
<td>http://www.facebook.com</td>
</tr>
<tr>
<td>row4</td>
<td>zyx 24</td>
<td>767</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>Bison</td>
<td>http://www.whitehouse.gov/</td>
</tr>
<tr>
<td>row5</td>
<td>abc 11</td>
<td>3</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>Chimp</td>
<td>http://www.ucla.edu/</td>
</tr>
<tr>
<td>row6</td>
<td>abc 2</td>
<td>56</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>Elephant</td>
<td>http://www.wikipedia.org/</td>
</tr>
<tr>
<td>row7</td>
<td>abc 9</td>
<td>155</td>
<td>Lion</td>
<td>http://www.nytimes.com/</td>
</tr>
<tr>
<td>row8</td>
<td>ABC 10</td>
<td>87</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>Zebra</td>
<td>http://www.google.com</td>
</tr>
<tr>
<td>row9</td>
<td>zyx 1</td>
<td>999</td>
<td>Koala</td>
<td>http://www.mit.edu/</td>
</tr>
<tr>
<td>row10</td>
<td>zyx 12</td>
<td>0</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>Llama</td>
<td>http://www.nasa.gov/</td>
</tr>
<tr>
<td>row1</td>
<td>abc 123</td>
<td>10</td>
<td>Koala</td>
<td>http://www.google.com</td>
</tr>
<tr>
<td>row2</td>
<td>abc 1</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>Ox</td>
<td>http://www.yahoo.com</td>
</tr>
<tr>
<td>row3</td>
<td>abc 9</td>
<td>10</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>Girafee</td>
<td>http://www.facebook.com</td>
</tr>
<tr>
<td>row4</td>
<td>zyx 24</td>
<td>767</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>Bison</td>
<td>http://www.whitehouse.gov/</td>
</tr>
<tr>
<td>row5</td>
<td>abc 11</td>
<td>3</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>Chimp</td>
<td>http://www.ucla.edu/</td>
</tr>
<tr>
<td>row6</td>
<td>abc 2</td>
<td>56</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>Elephant</td>
<td>http://www.wikipedia.org/</td>
</tr>
<tr>
<td>row7</td>
<td>abc 9</td>
<td>155</td>
<td>Lion</td>
<td>http://www.nytimes.com/</td>
</tr>
<tr>
<td>row8</td>
<td>ABC 10</td>
<td>87</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>Zebra</td>
<td>http://www.google.com</td>
</tr>
<tr>
<td>row9</td>
<td>zyx 1</td>
<td>999</td>
<td>Koala</td>
<td>http://www.mit.edu/</td>
</tr>
<tr>
<td>row10</td>
<td>zyx 12</td>
<td>0</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>234</td>
<td>Llama</td>
<td>http://www.nasa.gov/</td>
</tr>
</tbody>
</table>
<div>
JS代码
$('table').tablesorter({
theme: 'blue',
widgets: ['zebra', 'columns', 'stickyHeaders', 'filter'],
usNumberFormat: false,
sortReset: true,
sortRestart: true
});
为了演示这个问题，我把它放到了jsfiddle中。向下滚动表格，然后水平滚动。
问题演示：http://jsfiddle.net/0088y5ba/4/
同样的问题（How to use tablesorter stickyheaders widget - not working?）对我不起作用。
最佳答案
There is an issue当stickyHeaders表包含在没有设置高度的div中时，我只是没有时间处理它。
一种解决方案是向div包装器添加高度（demo）
HTML格式
<div class="wrapper">
<table class="tablesorter">
...
</table>
<div>
CSS
.wrapper {
position: relative;
padding: 0 5px;
height: 350px;
overflow-y: auto;
}
脚本
$('table').tablesorter({
theme: 'blue',
widgets: ['zebra', 'columns', 'stickyHeaders', 'filter'],
widgetOptions: {
stickyHeaders_attachTo: $('.wrapper')
},
usNumberFormat: false,
sortReset: true,
sortRestart: true
});
如果您的用户群支持它，第二个解决方案是在不需要额外更改的地方使用cssStickyHeaders widget（demo）
$('table').tablesorter({
theme: 'blue',
widgets: ['zebra', 'columns', 'cssStickyHeaders', 'filter'],
usNumberFormat: false,
sortReset: true,
sortRestart: true
});