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

1、/* 解决表格错位问题（表格数据过多会出现滚动条，当筛选后数据过少，没滚动条时会发生错位）*/
方式一：
.el-table th.gutter,
.el-table colgroup.gutter{
display: table-cell!important;
}
/解决表格错位问题end/
方式二：
// 解决表格错位问题（火狐浏览器）
.ai-table–border th.gutter:last-of-type {
display: block!important;
width: 17px!important;
}
方式三：
qtable为表格上ref,在请求到表格数据赋值之后，进行执行下面代码

 this.$nextTick(() => {
     this.$refs.qtable.doLayout();
});

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/