自定义table滚动条

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滚动条)