开发者

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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜