HTML table固定表头
2018-06-24 01:41:14来源:未知 阅读 ()
最近尝试了几种HTML的table固定表头的方法..额...各有利弊,但很尴尬.....
1.thead和tbody的display设置为block;
这种可以实现,但是需要提前设置好每个th和td的宽度,否则th和对应的td会错开,无法对齐;
2.用两个table模拟,第一个作为thead,第二个作为tbody;
需要动态设置单元格宽度,基本上满足需求,但是在firefox中,会有一点点瑕疵,单元格边框会错开一点点;
3.今天在<前端乱炖>上找到的一个好方法,很好用,利用transform动态设置thead的scrollTop属性
模拟出来的固定表头,相对前两个方法简单很多,效果也很不错;
下面是原文链接:
http://www.html-js.com/article/cssyanjiu-css3shixiangudingbiaogetoubuerwuxushezhidanyuangetddikuandu%204019
2017-0524
有朋友发现了第三种方法的一个bug
没有边框是是没有任何问题的 如果th,td有边框的话 在滚动之后,th的边框会消失
经测试,发现原因为在transform时,th中的边框并没有移动,只有文字内容和背景色移动了, 而且再移动回初始位置时(即表格顶部),
背景色会盖在边框上面,导致看不到th的边框了
暂时只想到了一种勉强的替代方法, 就是在th中增加div, 这样 背景色,文字内容在滚动时,便不会覆盖边框了
但是在滚动时, 还是会有点儿瑕疵....
如果路过的大神感兴趣....希望能够帮忙解决掉......
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
下一篇:CSS透明度设置(兼容性)
- DIV居中的经典方法 2020-06-13
- Html/css 列表项 区分列表首尾 2020-06-11
- HTML骨架 2020-06-10
- HTML基础教程_1 2020-06-09
- HTML基础02 2020-06-09
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash