default
menu home
Icon library Sign up Login favorite_border message help_outline
Online notes - online bookmark

MDUI前端框架,表格头position: sticky无效的问题

styleTags: All CSS html javascript php/other IT
by: fanshome  2023-05-24 08:27(UTC)

MDUI前端框架不错,很漂亮、灵活,用起来能省不少时间。

但是有些时候,它也会引入一些意想不到的问题:比如我想做一个统计表格,统计一大堆数据,然后希望页面滚动的时候,表格头部能固定在页面顶端,方便查看数据。本来,这个功能实现起来很简单,css里写上:thead tr{position:sticky;top:60px;} 就能解决问题了。

然而,使用了MDUI的css框架后,预期的效果没有出现,表格头随着滚动一起和表格内容一样被消失了。上网搜索了一堆文章,检查了表格的父容器属性等等,都没有效果。最后没招,使用排除法,确认问题出在MDUI框架的”mdui-table-fluid“样式上,overflow-x:auto这句导致了position: sticky不生效。

本来,使用mdui-table-fluid样式是为了在手机上查看表格时,横向宽度不够,可以用手指左右拖动表格来查看完整内容,非常方便。谁知道会影响sticky属性能。

发现了问题,解决起来就容易了:

@media (min-width:1024px){.mdui-table-fluid{overflow-x:initial;}}

这样,在PC上再查看表格的时候,表格头可以固定住了,手机上不受影响,继续可以左右拖动,完美!

visibility 1611


- for heavy web user Online notes
adimg
logo Post a comment

captcha
Please check the captcha code
Cancel