TableSorter 2.0 Plugin - Enable Table scroll

Question

I am using the Tablesorter plugin and it works great. Currently, I achieve table scrolling using a div wrapper. Is it possible to make the table scroll, keeping the headers visible while scrolling and not using any divs?

Featherweight

... And a 2013-CrossBrowser solution?? – Scyphus

Answer 1

Try this CSS, adjusting the height to suit:

tbody{height: 4em; overflow: scroll}

Example: http://jsbin.com/ofice

Baumgardner

Answer 2

As showed above (or this example), to be cross-browser (and any doctype) the tbody and thead tags need CSS display as block. If you need to show scrollbar OUTSIDE of tbody, or need to use not-standard browsers, you need more complex solution:

For display scrollbar outside or use with old browsers

The solution is to split the table's thead and tbody in two distinct tables, then, use a div to control the scroll (overflow-y) of the second (tbody content) table.

Trade-offs:

• need to split into two tables (jQuery can do by creatig second table and coping thead);
• need to align both by add widthes.

Related questions:

• Is there a direct purpose for HTML's tbody?
• <table> : How can <thead> be displayed while scrolling through <tbody> in HTML/CSS
• Strict DocType imposes minimum table row height in FF/Chrome

---

Examples

• splitted table (by hand): http://jsfiddle.net/krauss/B9NsU/1/
• jQuery copying thread in a separate table: http://jsfiddle.net/krauss/yLGg6/1/

Scyphus

Answer 3

Note: I am answering this old post to update on the progress of TableSorter jQuery plugin.

You can use a fork of this plugin by @Mottie (http://mottie.github.io/tablesorter/docs/index.html)

Then just on DOM ready, run this script:

 $('table').tablesorter({
        widgets        : ['zebra', 'columns', 'stickyHeaders']
    });

All you have to include for this to work:

1) jquery.tablesorter.js

2) jquery.tablesorter.widgets.js

3) any of the css themes, eg: theme.blue.css

StickyHeaders widget will do the trick for you.

Yun