html - 可滚动 div 内的卡住表格标题

Question

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

Answer 1

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

所需要的只是一个包含 thead 和 tbody 的表。

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

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

如果您在页面上有多个表格，它也适用于您希望具有固定标题的每个表格。

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

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

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