分享 html 表格 可固定标题和列 (也适用于 移动客户端 )

2016-05-09 00:52:34 +08:00
 maomaomao001
顺带求个 在安卓上性能更好的这种表格.

在谷歌 ,android 4.1 ,微信 x5 , iphone 上效果很好,完全没有延迟,

Demo 地址:
http://maomaomao.coding.me/games/table2/example1.html

使用 jq:
http://maomaomao.coding.me/games/table2/example2.html

ps:导入怎么把 jquery 中的 windth 方法分类出来....


谷歌浏览器上的效果:
1.


2.




UC 9.0 上 标题行总是慢一点.
桌面版 firefox 上无法对齐.求大神找找为什么 在火狐上不正常吧,谢谢!

3.火狐上的效果




完全一样的代码.前端好难做到兼容很多浏览器啊.求 v 站大神们帮帮....
2461 次点击
所在节点    分享创造
5 条回复
qhxin
2016-05-09 09:43:01 +08:00
依赖 scroll 事件回调啊,有延迟的话,试试用定时器去刷新呢。
qhxin
2016-05-09 09:44:13 +08:00
至于对不齐,应该是盒模型没一致吧。边框宽度导致的。
maomaomao001
2016-05-09 10:02:41 +08:00
@qhxin 定时器刷新? 段时间没不停的刷新?
sinosure
2016-05-14 10:38:52 +08:00
很好,挺有用的
maomaomao001
2019-12-31 14:43:46 +08:00
居然 css 已经有最好的方案了,sticky 定位

https://codesandbox.io/s/epic-tu-12rmy?fontsize=14&hidenavigation=1&theme=dark


<iframe
src="https://codesandbox.io/embed/epic-tu-12rmy?fontsize=14&hidenavigation=1&theme=dark"
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
title="epic-tu-12rmy"
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
></iframe>

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/277228

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX