javascript - 滚动表格时固定表格内的标题

标签 javascript css fixed-header-tables

问题:

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

问题:

有没有办法使用 CSS/JS - jQuery 将表头保持在表本身的固定位置,这样当用户滚动浏览数据时,表头总是只显示就像您希望它出现在移动应用程序中一样? (mac 版 Numbers 也这样做)。我不介意使用 CSS3,因为这是针对移动设备的。

具有相同行为的其他事物

  • Apple Numbers 当您向下滚动并且标题不在 View 中时,它们会保持固定,直到您离开表格。
  • iPhone Instagram 应用程序滚动浏览提要时,用户的标题会一直显示在 View 中,直到出现新帖子。
  • iPhone 通讯录应用 当滚动浏览所有通讯录时,您所在的信件部分会保持在顶部,直到出现新信件。

我只是想确保你们知道我在说什么,因为我找不到与我想做的事情相似的东西。不确定我是否输入了错误的搜索词或什么。但它几乎是 floatfixed 之间的混合样式。

最佳答案

Code drops 有一篇关于在滚动时固定表格标题的优秀文章。

该解决方案基于 JQuery,适用于行标题和列标题

Sticky Table Headers & Columns

关于javascript - 滚动表格时固定表格内的标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30361939/

相关文章:

javascript - 刷新后才显示 Facebook 分享按钮

javascript - 将纬度和经度保存在对象中

php - 如何使用 PHP 编辑外部 css 文件?

angularjs - Angular Material Design 中的固定表格标题

具有固定位置和可滚动表格数据元素的 HTML 表格标题

javascript - FixedHeader 的问题

javascript - node.js/socket.io - 跟踪客户端

javascript - slider 不会上下滑动

html - PartialViews - 不在编辑器/显示模板中使用共享 Site.css - ASP.NET MVC 3

css - 更改CSS中文本框的宽度