1

问题:

我有一张太大的桌子,不能作为移动设备的液体样式元素。我的解决方案是制作overflow-x: auto. 效果很好,几乎就是移动应用程序上的电子表格的工作方式。一个问题是,表头在该offset-y部分内时可能会让人难以阅读。我有时会发现自己向上滚动只是为了查看我正在查看的数据列。

问题:

有没有办法使用CSS/JS - jQuery这样当用户滚动数据时,表头总是像您期望的那样显示在移动应用程序中?(Mac 的 Numbers 也可以这样做)。我不介意使用 CSS3,因为这是用于移动设备的。

其他具有相同行为的事物

  • Apple Numbers当您向下滚动并且标题应该不在视线范围内时,它们会保持不变,直到您通过表格。
  • iPhone Instagram App滚动浏览提要时,用户的标题会一直显示,直到出现新帖子。
  • iPhone 通讯录应用程序滚动浏览所有联系人时,您所在的字母部分会保持在顶部,直到出现新的字母。

我只是想确保你们知道我在说什么,因为我找不到与我想做的类似的事情。不确定我是否输入了错误的搜索词或什么。但它几乎是 和 之间的混合float风格fixed

4

2 回答 2

2

This is what you're looking for: https://css-tricks.com/persistent-headers/

It's been done many times before.

于 2015-05-20T23:25:03.000 回答
2

Code drops has an excellent article on making the table headers fixed while scrolling.

The solution is based on JQuery and it works for both, row heading and column heading

Sticky Table Headers & Columns

于 2015-05-20T23:26:59.320 回答