首页 > 开发编程 > web编程 > html开发学习 > 正文
实现有横竖滚动条的表格,纵向滚动时表头不动
2014-07-28     我来说两句       作者:
   我要投稿

实现有横竖滚动条的表格,纵向滚动时表头不动

这是前些天我应聘某家互联网公司的一道笔试题,描述如下:实现这样一个表格,有横竖滚动条,竖滚动条不包括头部,横滚动条包括头部,竖滚动条滚动时头部不动,横滚动条滚动时头部动,表格单元格宽度不固定。

其实实现这个效果并不太难,唯一遇到的一个问题就是这里所提到的表格单元格设置宽度无效的解决办法,后来单元格就用div撑开了。

另外一个问题是怎样让纵向滚动时表头不动,我们可以这样做,监听滚动事件,当纵向滚动时,我们让表头绝对定位,脱离文档流,然后动态设置其top值为滚动的高度,这样,头部就可以一直固定到初始位置了,当滚动条恢复初始位置,即滚动高度为0时,再让表头回到正常的文档流,这样效果就出来了。

最后一个问题就是,当表头“浮动时”,怎样让表头的数据列和下面单元格的数据列保持对齐,这里是这样做的,滚动之前用js遍历表头每个数据列并保存每列的宽度,同样下面的单元格也这样做,滚动时,各列动态地互相赋值(不能直接对td或th赋值,可以加div,对div赋值),这样就可以对齐了。

对于代码就不贴了,下面有示例及源码下载,可以在那里面看。

   

除特别声明,本站所有文章均为原创,如需转载请以超级链接形式注明出处:WEB前端开发

点击收藏到自己的收藏夹!回本站首页
您对本文章有什么意见或着疑问吗?请到论坛讨论您的关注和建议是我们前行的参考和动力  
上一篇:表格单元格设置宽度无效的解决办法
下一篇:仿新浪游戏导航条制作
相关文章
图文推荐
排行
热门
综合
Web
python
关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训
版权所有: 中国黑帽网--致力于做最好的网络安全技术学习网站 。