Tablesorter by itself works great – it embeds into each HTML table nicely, wherever it is.
But when you have many rows, without paging, you might want to freeze the 1st row (the column row). Here tablesorter allows a nice widget to run:
The widget seemlessly imlements a double header mechanism:
- Your original table header – active as long as you didn’t scroll at all, or when there are few rows to create a scroll
- A duplicate table header – replacing the original one as soon as your table need scrolling. It uses a simple show/hide technique
An important issue is to remove your existing overflow: auto; code from your containing element, if you had any, otherwise it would conflict with the component scrolling technique.
Now, what if you need some HTML header before your table starts? (pretty common need)
You’ll need all of these steps to achieve that (again, because of the tablesorter scrolling mechanism):
- Add a widget option with your desire OFFSET from the top:
- Add these CSS to your header div:
width: 100%; //to cover all the rows scrolling in the back…
background-color: White; //to cover all the rows scrolling in the back…
- Add this CSS to your main div containing your table: margin-top: OFFSETpx;
This way you’ll achieve smooth table sticky-enabled scrolling, with your custom HTML header 🙂