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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 3107 天前的主题，其中的信息可能已经有所发展或是发生改变。

顺带求个在安卓上性能更好的这种表格.

在谷歌 ,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.

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

3.火狐上的效果

完全一样的代码.前端好难做到兼容很多浏览器啊.求 v 站大神们帮帮....

5 条回复 • 2019-12-31 14:43:46 +08:00

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 via Android

@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>

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