您的位置:首页 > Web前端 > Vue.js

vue+element样式修改(表格错位问题、表头根据单词换行、滚动条样式)

2019-04-03 17:46 3595 查看

1、/* 解决表格错位问题(表格数据过多会出现滚动条,当筛选后数据过少,没滚动条时会发生错位)*/
.el-table th.gutter,
.el-table colgroup.gutter{
display: table-cell!important;
}
/解决表格错位问题end/

2、/* 表格表头根据单词换行样式 /
.el-table th>.cell{
word-break: break-word;
}
/ 表头单词换行end*/

3、/滚动条 begin/
*(通配符选择器) {
scrollbar-face-color: #cccccc;
/面子/
scrollbar-arrow-color: #fff;
/箭头/
scrollbar-3dlight-color: #ccc;
/最外左/
scrollbar-highlight-color: #ccc;
/左二/
scrollbar-shadow-color: #ccc;
/右二/
scrollbar-darkshadow-color: #ccc;
/右一/
scrollbar-track-color: #eeeeee;
/滑道/
}
::-webkit-scrollbar {
width: 6px;
height: 10px;
}
/滚动条宽度/
/滚动条按钮/
/滑道全部/
::-webkit-scrollbar-track-piece {
background-color: #fff0 ;
/滑道/
-webkit-border-radius: 0;
/滑道圆角宽度/
}
::-webkit-scrollbar-thumb {
background-color: #ccc;
/滑动条表面/
border: solid 2px #ccc;
/滑动条边框/
border-radius: 7px;
/滑动条圆角宽度/
}
/横竖滚动条交角/
::-webkit-scrollbar-corner {
background-color: none;
}
/横竖滚动条交角图案/
::-webkit-resizer {
background-repeat: no-repeat;
background-position: bottom right;
}
/鼠标滑过滑动条/
::-webkit-scrollbar-thumb:hover {
background-color: #bbb;
border: solid 2px #bbb;
/滑动条边框/
}
/滚动条 end/

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: