美文网首页
自定义table滚动条

自定义table滚动条

作者: linda的小天地 | 来源:发表于2019-08-29 10:19 被阅读0次

    table在做PC端列数很多,到了移动端,很多列没法整合加隐藏,所以就只能让table出现滚动条,但是默认的滚动条在移动端是隐藏的,只有用手去滑动table的时候滚动条才显示,没法起到提示用户的作用,搜了N多帖子,发现可以自定义滚动条来显示,直接贴代码

    .rows {

      width:100%;

      overflow: hidden;

      overflow-x: auto;

    }

    .rows::-webkit-scrollbar-track-piece {

      background-color: rgba(0, 0, 0, 0);

      border-left: 1px solid rgba(0, 0, 0, 0);

    }

    .rows::-webkit-scrollbar {

      width: 5px;

      height: 5px;

      -webkit-border-radius: 5px;

      -moz-border-radius: 5px;

      border-radius: 5px;

    }

    .rows::-webkit-scrollbar-thumb {

      background-color: rgba(0, 0, 0, 0.3);

      background-clip: padding-box;

      -webkit-border-radius: 5px;

      -moz-border-radius: 5px;

      border-radius: 5px;

      min-height: 28px;

    }

    .rows::-webkit-scrollbar-thumb:hover {

      background-color: rgba(0, 0, 0, 0.3);

      -webkit-border-radius: 5px;

      -moz-border-radius: 5px;

      border-radius: 5px;

    }

    相关文章

      网友评论

          本文标题:自定义table滚动条

          本文链接:https://www.haomeiwen.com/subject/gubbectx.html