For jQuery tablesorter 2.0 (https://mottie.github.io/tablesorter/docs/) when the tables header row contains child tables, the header values disappear when you start to scroll using stickyHeaders.
Using the stickyHeaders demo (https://mottie.github.io/tablesorter/docs/example-widget-sticky-header.html), the heading for "First Name" has been changed to have its own table:
<div class="narrow-block wrapper">
<table id="table2" class="tablesorter">
<caption class="dark-row">Student Grades</caption>
<thead>
<tr><th>Account #</th><th><table><tr><td>First Name</td></tr></table></th><th>Last Name</th><th>Age</th><th>Total</th><th>Discount</th><th>Diff</th></tr>
</thead>
<tbody>
<tr><td>A43</td><td>Peter</td><td>Parker</td><td>28</td><td>9.99</td><td>20.3%</td><td>+3</td></tr>
<tr><td>A255</td><td>John</td><td>Hood</td><td>33</td><td>19.99</td><td>25.1%</td><td>-7</td></tr>
<tr><td>A33</td><td>Clark</td><td>Kent</td><td>18</td><td>15.49</td><td>44.2%</td><td>-13</td></tr>
<tr><td>A11</td><td>Bruce</td><td>Almighty</td><td>45</td><td>153.19</td><td>44%</td><td>+19</td></tr>
<tr><td>A102</td><td>Bruce</td><td>Evans</td><td>56</td><td>153.19</td><td>23%</td><td>+9</td></tr>
<tr><td>A23</td><td>Mike</td><td>Peters</td><td>22</td><td>5.69</td><td>20.3%</td><td>+2</td></tr>
<tr><td>A55</td><td>Leslie</td><td>Kent</td><td>33</td><td>15.99</td><td>25.1%</td><td>-3</td></tr>
<tr><td>A3</td><td>Frank</td><td>Mint</td><td>44</td><td>12.59</td><td>44.2%</td><td>-12</td></tr>
<tr><td>A21</td><td>Joe</td><td>Thomas</td><td>45</td><td>15.25</td><td>44%</td><td>+12</td></tr>
<tr><td>A12</td><td>Tess</td><td>Evans</td><td>66</td><td>13.59</td><td>23%</td><td>+4</td></tr>
<tr><td>A21</td><td>Peter</td><td>Dunn</td><td>12</td><td>2.99</td><td>21.1%</td><td>+2</td></tr>
<tr><td>A33</td><td>Harry</td><td>Jones</td><td>13</td><td>19.49</td><td>22.2%</td><td>-6</td></tr>
<tr><td>A13</td><td>John</td><td>James</td><td>16</td><td>13.89</td><td>42.1%</td><td>-13</td></tr>
<tr><td>A71</td><td>Nick</td><td>Parker</td><td>45</td><td>13.89</td><td>44%</td><td>+29</td></tr>
<tr><td>A21</td><td>Charles</td><td>Dunn</td><td>19</td><td>15.49</td><td>22%</td><td>+3</td></tr>
</tbody>
</table>
</div>
With stickyHeaders when you scroll down, the column heading "First Name" is cleared out.
Thanks for the help!
The stickyHeaders widget was hiding extra thead
s and removing tbody
s from the cloned sticky header table. I've tweaked the code to allow nested tables, but the change is currently only available in the master branch (demo). A new release will be available soon, once a few other bugs have been squashed.
<thead>
<tr>
<th>
<table>
<thead>
<tr>
<th>test</th>
</tr>
</thead>
<tbody>
<tr>
<td>test</td>
</tr>
</tbody>
</table>
</th>
<th>...</th>
</tr>
</thead>