修复了滚动 table 时 table 内的 header
Fixed header within table when scrolling the table
问题:
我有一个 table 太大,不能作为移动设备的液体样式元素。我的解决方案是制作 overflow-x: auto
。效果很好,几乎就是电子表格在移动应用程序上的工作方式。一个问题是,table 与 offset-y
部分中的 header 可能会混淆阅读。有时我发现自己向上滚动只是为了查看我正在查看的数据列。
问题:
有没有办法使用 CSS/JS - jQuery
将 table header 保持在 table 本身内的固定位置,以便在用户滚动数据时,header 总是像您期望的那样显示在移动应用程序中? (mac 的数字也这样做)。我不介意使用 CSS3,因为它适用于移动设备。
具有相同行为的其他事物
- Apple Numbers 当您向下滚动并且 header 应该不在视图中时,它们会保持固定,直到您放弃 table。
- iPhone Instagram 应用程序 滚动浏览动态时,用户的 header 会保持在视图中,直到新的 post 出现。
- iPhone 联系人应用程序 滚动浏览 所有联系人 时,您所在的信件部分会保持在顶部,直到出现新的信出现了。
我只是想确保你们知道我在说什么,因为我找不到与我想做的事情相似的东西。不确定我是否输入了错误的搜索词或什么。但它几乎是 float
和 fixed
之间的混合风格。
这就是您要查找的内容:https://css-tricks.com/persistent-headers/
以前做过很多次
Code drops 有一篇关于在滚动时修复 table headers 的优秀文章。
该解决方案基于 JQuery,适用于行标题和列标题
问题:
我有一个 table 太大,不能作为移动设备的液体样式元素。我的解决方案是制作 overflow-x: auto
。效果很好,几乎就是电子表格在移动应用程序上的工作方式。一个问题是,table 与 offset-y
部分中的 header 可能会混淆阅读。有时我发现自己向上滚动只是为了查看我正在查看的数据列。
问题:
有没有办法使用 CSS/JS - jQuery
将 table header 保持在 table 本身内的固定位置,以便在用户滚动数据时,header 总是像您期望的那样显示在移动应用程序中? (mac 的数字也这样做)。我不介意使用 CSS3,因为它适用于移动设备。
具有相同行为的其他事物
- Apple Numbers 当您向下滚动并且 header 应该不在视图中时,它们会保持固定,直到您放弃 table。
- iPhone Instagram 应用程序 滚动浏览动态时,用户的 header 会保持在视图中,直到新的 post 出现。
- iPhone 联系人应用程序 滚动浏览 所有联系人 时,您所在的信件部分会保持在顶部,直到出现新的信出现了。
我只是想确保你们知道我在说什么,因为我找不到与我想做的事情相似的东西。不确定我是否输入了错误的搜索词或什么。但它几乎是 float
和 fixed
之间的混合风格。
这就是您要查找的内容:https://css-tricks.com/persistent-headers/
以前做过很多次
Code drops 有一篇关于在滚动时修复 table headers 的优秀文章。
该解决方案基于 JQuery,适用于行标题和列标题