HTMLtable固定表头
最近尝试了⼏种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, 这样背景⾊,⽂字内容在滚动时，便不会覆盖边框了
table设置内边框但是在滚动时, 还是会有点⼉瑕疵....
如果路过的⼤神感兴趣....希望能够帮忙解决掉......

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。