TableSorter 2.0 Plugin - Enable Table scroll
I am using the Tablesort开发者_StackOverflower 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?
Try this CSS, adjusting the height to suit:
tbody{height: 4em; overflow: scroll}
Example: http://jsbin.com/ofice
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/
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.
精彩评论