table自定义滚动条样式

效果图：

css代码：

//table样式
.home_table{width: 90%;border-collapse: separate;border-spacing: 20px 10px;margin-left: -20px;//y轴滚动条样式开始display: block;height: 195px;overflow-y: scroll;//y轴滚动条样式结束
}
//自定义滚动条样式开始
::-webkit-scrollbar {width:5px; /*滚动条宽度*/height:18px; /*滚动条高度*/
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {box-shadow: 0px 1px 3px #071e4a inset; /*滚动条的背景区域的内阴影*/border-radius: 10px; /*滚动条的背景区域的圆角*/background-color: #071e4a; /*滚动条的背景颜色*/
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {box-shadow: 0px 1px 3px #00a0e9 inset; /*滚动条的内阴影*/border-radius: 10px; /*滚动条的圆角*/background-color: #00a0e9; /*滚动条的背景颜色*/
}
//自定义滚动条样式结束

table自定义滚动条样式相关推荐

用css自定义滚动条样式
如果你是一个搞网页前端的,有必要了解一下自定义滚动条样式这个东东.目前支持自定义滚动条样式的有IE浏览器.webkit内核浏览器(chrome). IE下的滚动条样式 1.样式规则 scrollbar ...
android 滚动条自定义样式,IScroll的使用-方向键绑定自定义滚动条样式
之前在webkit上开发一个滚动控件,需要完成的是一段文字,上下键可以滚动,且自定义滚动条.第一想法就是浏览器原生overflow:scroll,且webkit支持自定义滚动条样式: webkit自定 ...
滚动条样式设置_自定义滚动条样式
自定义滚动条样式,设置样式即可: /* 设置滚动条的样式 */ ::-webkit-scrollbar {width: 8px;height: 8px;background: transparent; ...
Vue项目自定义滚动条样式【火狐、谷歌、360】
Vue项目中自定义浏览器的滚动条样式,已解决火狐.谷歌.360 火狐浏览器谷歌和360 火狐浏览器 // 火狐浏览器专属 // 仅有scrollbar-color.scrollbar-width两个 ...
h5分页样式 css,【前端技术】Quasar Table: 自定义分页样式
说点什么一个管理端的系统,最常用的是数据表格及分页. 这里我记录一下使用QTable 数据表及QPagination组件来实现想要的数据表格及分页的过程. 可直接跳至文章末尾,看实现效果:传送门. ...
CSS 滚动条: 自定义滚动条样式
CSS 滚动条: 自定义滚动条样式文章目录 CSS 滚动条: 自定义滚动条样式前言正文 overflow & ::-webkit-scrollbar 实际效果(自定义滚动条.隐藏滚动条) ...
div横向超出可滚动，自动添加滚动条，自定义滚动条样式，
先看一下最终的效果图吧: 第一种文字内容超出显示滚动条: 父盒子:横向超出滚动:overflow-x: scroll; .box {width: 100%;box-sizing: border-box ...
【CSS】DIV 自定义滚动条样式
当内容超出容器时,容器会出现滚动条,其自带的滚动条有时无法满足我们审美要求,那么我们可以通过css伪类来实现对滚动条的自定义来自:DIV 自定义滚动条样式滚动条的css样式主要有三部分组成 ::- ...
【常用代码06】CSS自定义滚动条样式 overflow-y开启滚动条
自定义滚动条样式默认滚动条样式如下↓ 首先设置div盒子然后给盒子开启滚动条这样超出高度或者宽度的内容将会被隐藏滚动就可以看到 // 开启y轴滚动条 overflow-y: auto; 修改后 ...

table自定义滚动条样式

table自定义滚动条样式相关推荐

最新文章

热门文章