HTML table固定表头
最近尝试了几种HTML的table固定表头的方法..额...各有利弊,但很尴尬.....
1.thead和tbody的display设置为block;
这种可以实现,但是需要提前设置好每个th和td的宽度,否则th和对应的td会错开,无法对齐;
2.用两个table模拟,第一个作为thead,第二个作为tbody;
需要动态设置单元格宽度,基本上满足需求,但是在firefox中,会有一点点瑕疵,单元格边框会错开一点点;
3.今天在<前端乱炖>上找到的一个好方法,很好用,利用transform动态设置thead的scrollTop属性
模拟出来的固定表头,相对前两个方法简单很多,效果也很不错;
下面是原文链接:
2017-0524
有朋友发现了第三种方法的一个bug
没有边框是是没有任何问题的 如果th,td有边框的话 在滚动之后,th的边框会消失
经测试,发现原因为在transform时,th中的边框并没有移动,只有文字内容和背景色移动了, 而且再移动回初始位置时(即表格顶部),
背景色会盖在边框上面,导致看不到th的边框了
暂时只想到了一种勉强的替代方法, 就是在th中增加div, 这样 背景色,文字内容在滚动时,便不会覆盖边框了
但是在滚动时, 还是会有点儿瑕疵....
如果路过的大神感兴趣....希望能够帮忙解决掉......
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步