javascript - 弹出框内显示table,如何固定表头?
PHP中文网
PHP中文网 2017-04-11 13:00:28
0
2
330

我的需求是:
当用户点击一个超链接时,在超链接的左边弹出一个框,里面显示一个表格,表格的数据是从后台拿过来的,当数据很多时,弹出框就会显示水平和纵向滚动条,用户希望能将表头固定在弹出框头部,这样,纵向滚动的时候可以清楚的看到当前是哪个列的值。水平滚动的时候,表头也应该跟着水平滚动。

总结一句话需求就是, 弹出框内显示表格,当数据多的时候,纵向滚动要求表头固定在弹出框顶部,水平滚动要求表头也跟着水平滚动。

我自己尝试着做了一下,表头固定在弹出框头部可以实现(用的position:fixed实现),但是现在就卡在水平滚动这块了,因为position:fixed相当于针对浏览器定位,所以设置width和overflow都不起作用,有没有人之前遇到过这种需求的麻烦给点思路,谢谢。

PHP中文网
PHP中文网

认证高级PHP讲师

Antworte allen(2)
巴扎黑

没有遇过这种需求。fixed不行的话可以换个思路,例如表头和表内容分离开,表头absolute固定,然后表内容去overflow试试看

PHPzhong

问题解决了,不过有点问题。我是额外弄了个新表,里面只包含表头,对此快用的position:relative,然后监听弹出框的滚动事件,因为表头要一直定位在弹出框顶部,所以我这块采取的方法是监听弹出框的scroll事件,拿到scrollTop值然后重新定位表头那个区域。这样有一个缺点就是,要是用户滚动y轴比较慢的话,那么表头区域很明显可以看出跳动效果。还没有好思路解决这个现象。

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage