近期由于工作需要要修改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的类名。。。如果小伙伴想全局修改导航条可去掉该类名
效果图如下：
微信扫一扫，打开小程序浏览更便捷
转载作品，原作者：，文章来源：https://blog.csdn.net/different9102/article/details/120727197
微信扫一扫
支付宝扫一扫
相关推荐
-
Node.js：nodemailer + ejs 发送邮件
nodemailer: 在 node.js 环境下轻松实现邮件发送功能. ejs: 高效的嵌入式 javascript 模板引擎,让你利用 javascript 生成HTML页面 …
-
无需公众号实现微信JSSDK分享卡片！Safari浏览器分享到微信自动成卡片！
要在微信分享卡片，需要接入微信自家的JSSDK，比较麻烦，还需要认证公众号，但是如果你没有这样的条件，那么你也可以试试使用iOS的Safari浏览器轻松实现，只需要在html中加入…
-
vue实现增加、修改、删除、查询、标记
<template> <div> <div> <input type=”text” v-model=”prop.addname” ref=…
-
解决访问国外公共静态资源速度慢的问题
由于众所周知的原因，jsdelivr国内被墙，部分地区可能无法正常访问，其他国外的公共静态资源也存在访问速度慢或无法正常访问的问题，为解决该问题，辉哥博客&蓝易云安全开发了国外静态资源js和css资源CDN替换国内的脚本，供所有用户免费使用。
-
先睹为快即将到来的HTML6
先睹为快即将到来的HTML6。随着 HTML5 的普及，在 2014 年，这种标记语言发生了很多变化，变得更加友好，浏览器对新标准的支持热度也越来越高。而HTML并不止于此，还在不断发生变化，并且可能会获得一些特性来证明对 HTML6 的命名更改是合理的。
-
推荐一款免费的网页打印控件
做过网页打印的应该都清楚，如果想使用js直接调用本地打印机进行打印任务都需要基于打印控件，因为js不能直接调用打印机，即使是google浏览器也是内置的打印控件。 网页打印控件比较…