V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
maomaomao001
V2EX  ›  分享创造

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

  •  
  •   maomaomao001 · 2016-05-09 00:52:34 +08:00 · 2311 次点击
    这是一个创建于 2907 天前的主题,其中的信息可能已经有所发展或是发生改变。
    顺带求个 在安卓上性能更好的这种表格.

    在谷歌 ,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 站大神们帮帮....
    5 条回复    2019-12-31 14:43:46 +08:00
    qhxin
        1
    qhxin  
       2016-05-09 09:43:01 +08:00
    依赖 scroll 事件回调啊,有延迟的话,试试用定时器去刷新呢。
    qhxin
        2
    qhxin  
       2016-05-09 09:44:13 +08:00
    至于对不齐,应该是盒模型没一致吧。边框宽度导致的。
    maomaomao001
        3
    maomaomao001  
    OP
       2016-05-09 10:02:41 +08:00 via Android
    @qhxin 定时器刷新? 段时间没不停的刷新?
    sinosure
        4
    sinosure  
       2016-05-14 10:38:52 +08:00
    很好,挺有用的
    maomaomao001
        5
    maomaomao001  
    OP
       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>
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1596 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 23:59 · PVG 07:59 · LAX 16:59 · JFK 19:59
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.