css修改导航条样式

2022-01-17 09:35 • Html/CSS, 前端开发 • 阅读 268

近期由于工作需要要修改table表格导航条样式。
本人特整理出相关代码，以及最后效果，供各位小伙伴参考。

具体代码如下：

.xp-table-content ::-webkit-scrollbar {
    
    width:8px;
    height: 8px;
}
.xp-table-content ::-webkit-scrollbar-thumb:horizontal  {
    
    border-radius:10px;
    background:rgba(0,0,0,0.2);
    -webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
}
.xp-table-content ::-webkit-scrollbar-thumb:vertical  {
    
    border-radius:0px;
    background:rgba(0,0,0,0.2);
    -webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
}

.xp-table-content ::-webkit-scrollbar-track:vertical{
    
    background:rgba(0,0,0,0.1);
}
.xp-table-content ::-webkit-scrollbar-track:horizontal{
    
    background:#fff;
}

注： xp-table-content类名是给我们自己封装的table的类名。。。如果小伙伴想全局修改导航条可去掉该类名

效果图如下：

css修改导航条样式