I have a huge table with vast amounts of columns, which is inserted within a div element with an overflow property set to auto. I am using StickyHeaders widget (a widget for the fork of TableSorter plugin by @Mottie) and couldn't make stickyHeaders scroll with the table body.
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 CODE
$('table').tablesorter({
theme: 'blue',
widgets: ['zebra', 'columns', 'stickyHeaders', 'filter'],
usNumberFormat: false,
sortReset: true,
sortRestart: true
});
To demonstrate the problem, I have put it into jsfiddle. Scroll down the table, and then scroll horizontally. Problem Demo: http://jsfiddle.net/0088y5ba/4/
Same problem here (How to use tablesorter stickyheaders widget - not working?) is not working for me.
There is an issue when a stickyHeaders table is contained in a div with no set height, I just haven't had the time to work on it.
One solution is to add a height to the div wrapper (demo)
HTML
<div class="wrapper">
<table class="tablesorter">
...
</table>
<div>
CSS
.wrapper {
position: relative;
padding: 0 5px;
height: 350px;
overflow-y: auto;
}
Script
$('table').tablesorter({
theme: 'blue',
widgets: ['zebra', 'columns', 'stickyHeaders', 'filter'],
widgetOptions: {
stickyHeaders_attachTo: $('.wrapper')
},
usNumberFormat: false,
sortReset: true,
sortRestart: true
});
A second solution, if your user base supports it, is to use the cssStickyHeaders widget where no extra changes are needed (demo)
$('table').tablesorter({
theme: 'blue',
widgets: ['zebra', 'columns', 'cssStickyHeaders', 'filter'],
usNumberFormat: false,
sortReset: true,
sortRestart: true
});