显示滚动条并更改样式

效果图

在这里插入图片描述

代码

//列如 让table显示滚动条时
 table {
    
    
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    height: 480px;
    border: 1px solid red !important;
  }
/* 滚动条样式 */
  table::-webkit-scrollbar {
    
    
    width: 6px;
    height: 80px !important;
  }
  table::-webkit-scrollbar-thumb {
    
    
    background-color: #2c98ff;
    border-radius: 5px;
    height: 80px;
  }
  table::-webkit-scrollbar-track {
    
    
    background-color: #030c22;
    height: 80px;
  }
  table::-webkit-scrollbar-thumb:hover {
    
    
    background-color: #2c98ff;
    height: 80px;
  }
  table::-webkit-scrollbar-thumb:active {
    
    
    background-color: #2c98ff;
    height: 80px;
  }

参考1

Guess you like

Origin blog.csdn.net/m0_53912016/article/details/121094099
Recommended