TableSorter 2.0插件 - 启用表滚动

时间:2010-01-21 18:38:53

标签: jquery css tablesorter

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

3 个答案:

答案 0 :(得分:3)

试试这个CSS,调整高度以适应:

tbody{height: 4em; overflow: scroll}

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

答案 1 :(得分:2)

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

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

解决方案是将表的theadtbody拆分为两个不同的表,然后使用div来控制第二个表的滚动(overflow-y)(tbody内容) )表。

权衡:

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

相关问题:


实施例

答案 2 :(得分:1)

注意:我正在回答这篇旧帖子,以更新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小部件可以帮到你。