用控制台看class
更改表格样式:
/* 表头背景颜色和高度 */ 表格外面在放个div的class
.working-hours-table {
/deep/.el-table th {
padding: 0;
line-height: 28px;
height: 28px;
background: #F5F7FA;
font-family: MicrosoftYaHei-Bold;
font-size: 12.5px;
color: #888888;
font-weight: 700;
background: green;
}
/deep/.el-table td {
line-height: 28px;
height: 28px;
padding: 0;
font-size: 13px;
color: #333;
background: yellow;
}
/deep/ .el-table .cell {
// padding-left: 5px;
// padding-right: 5px;
background: red;
}
}
表格错位的问题
由于有5个列左边固定了,出边了错位的问题
解决办法:
表头设置了高度是28px加上1px的边框是29px,那我们就把表格内容固定到整个表格的高度的29px
/* 表格错位的问题 */
.working-hours-table {
/deep/.el-table__fixed-body-wrapper{
top:29px !important;
height: calc(100% - 29px) !important;
}
}
在表格底部出现的问题
被固定住的列底部,没有完整显示,底部多出现了黄色,黄色是给整个表格内容的背景颜色,意思就是有一部分内容被遮住了
解决办法:
/* 表格错位的问题 */
.working-hours-table {
/deep/.el-table__fixed-body-wrapper{
top:29px !important;
height: calc(100% - 29px) !important;
}
/deep/.el-table__fixed{
height: 100% !important;
}
/deep/ .el-table__fixed-right{
height: 100% !important;
}
}
还发现了一个很奇怪的问题,我觉得应该是我写css不规范造成的
在没被固定的列下边出现了被白色遮住的地方,导致了滚轮滚动的时候让表格错位了,
解决办法:
加上padding-left 和padding-right就可以了,很奇怪,我也不知道为什么
/deep/ .el-table .cell {
padding-left: 5px;
padding-right: 5px;
background: red;
}
希望有大佬帮忙解释解释,是不是我本身css就写得有问题