可滚动 div 内的冻结表头

2023-12-26

我有三个div。页眉、中部和页脚。中央 div (gridview) 中有一个表格,它几乎总是比外部 div 长。所以我让这个 div 可以垂直滚动。问题是:如何使表头在 div 向下滚动后可见?我可以使用单独的 div 或表格来完成此标题并使其固定,但表格中的列宽度并不总是相同 - 所以我不知道如何维护标题中的列宽度。有什么线索吗?


我刚刚组装了一个 jQuery 插件,它完全可以满足您的需求。它的尺寸非常小并且非常容易实现。

所需要的只是一个具有 thead 和 tbody 的表。

您可以将该表包装在带有类名的 DIV 中,并且该表将始终调整大小以适合该 div。例如,如果您的 div 随浏览器窗口缩放,那么表格也会随浏览器窗口缩放。滚动时标题将固定。页脚将被固定(如果您启用页脚)。您还可以选择克隆页脚中的页眉并将其修复。另外,如果您将浏览器窗口设置得太小并且所有列都无法容纳...它也会水平滚动(标题也是如此)。

您只需将 DIV 的类名传递给插件,如下所示: $('.myDiv').fixedHeaderTable({footer: true, footerId: 'myFooterId'}); 插件将完成剩下的工作。 FooterID 是页面上包含页脚标记的元素。如果您想将分页作为页脚,则可以使用此选项。

如果页面上有多个表格,它也适用于您想要有固定标题的每个表格。

在这里查看:http://fixedheadertable.mmalek.com/ http://fixedheadertable.mmalek.com/

请记住,它仍然是“测试版”,因此我每天都会添加新功能和错误修复。

支持的浏览器:IE6、IE7、IE8、FireFox、Safari 和 Chrome

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

可滚动 div 内的冻结表头 的相关文章

随机推荐