实际项目中的场景:为了适配动画页面,需要把table背景颜色改为透明,去除掉外边框,滚动条设置
效果图如下:
HTML代码块
<div class="threeCar-table">
<el-table :data="carData" border :max-height="640">
<el-table-column
prop="title"
label="名称"
width="160"
></el-table-column>
<el-table-column prop="data" label="车辆数据"></el-table-column>
</el-table>
</div>
CSS代码块
.threeCar-table {
position: absolute;
// float: left;
width: 400px;
margin: auto;
}
.threeCar-table /deep/ .el-table--fit{
padding: 20px;
}
.threeCar-table /deep/ .el-table, .el-table__expanded-cell {
background-color: transparent;
}
.threeCar-table /deep/.el-table::before {
height: 0px;
}
.threeCar-table /deep/.el-table--border::after {
width: 0px;
}
.threeCar-table /deep/.el-table--border {
border: none;
}
.threeCar-table /deep/ .el-table tr {
background-color: transparent!important;
font-weight:700;
color:#FF6100 ;
}
.threeCar-table /deep/ .el-table th {
background-color: transparent!important;
font-weight:700;
color:#FF6100
}
.threeCar-table /deep/ .el-table--enable-row-transition .el-table__body td, .el-table .cell{
background-color: transparent;
}
.threeCar-table /deep/ .el-table__body-wrapper::-webkit-scrollbar {
width: 6px; // 横向滚动条
height: 6px; // 纵向滚动条 必写
}
// 滚动条的滑块
.threeCar-table /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
background-color: transparent!important;
border-radius: 3px;
}
.el-table::before {
//去除底部白线
left: 0;
bottom: 0;
width: 100%;
height: 0px;
}