TableSorter 2.0插件 - 启用表滚动

Question

我使用的是Tablesorter插件，效果很好。目前，我使用div包装器实现表滚动。是否可以使表滚动，滚动时保持标题可见而不使用任何div？

Answer 1

试试这个CSS，调整高度以适应：

tbody{height: 4em; overflow: scroll}

示例：http://jsbin.com/ofice

Answer 2

如上所示（或this example），要成为跨浏览器（以及任何doctype），tbody和thead代码需要CSS display 作为块。如果您需要在tbody外显示滚动条，或者需要使用非标准浏览器，则需要更复杂的解决方案：

用于显示外部滚动条或与旧浏览器一起使用

解决方案是将表的thead和tbody拆分为两个不同的表，然后使用div来控制第二个表的滚动（overflow-y）（tbody内容） ）表。

权衡：

• 需要分成两个表（jQuery可以通过creatig第二个表并处理thead）;
• 需要通过添加widthes来对齐。

相关问题：

• 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

---

实施例

• 拆分表（手工）：http://jsfiddle.net/krauss/B9NsU/1/
• jQuery 在单独的表格中复制thread：http://jsfiddle.net/krauss/yLGg6/1/

Answer 3

注意：我正在回答这篇旧帖子，以更新TableSorter jQuery插件的进度。

您可以使用@Mottie（http://mottie.github.io/tablesorter/docs/index.html）

的此插件的分支

然后在DOM就绪，运行此脚本：

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

你需要包含所有这些工作：

1）jquery.tablesorter.js

2）jquery.tablesorter.widgets.js

3）任何css主题，例如：theme.blue.css

StickyHeaders小部件可以帮到你。