elementUI table 修改表格背景色，去除单元格底部横线
程序员文章站
2022-06-26 18:06:35
elementUI table 修改表格背景色，去除单元格底部横线原图：想把表格的背景设置成透明的，弄了很长时间表格是透明了，就是单元格的横线一直去不掉单元格带横线: 最终效果图:这是实例代码：
想把表格的背景设置成透明的，弄了很长时间表格是透明了，就是单元格的横线一直去不掉
原图：
单元格带横线:
最终效果图:
这是实例代码：
<template>
<div class="table-wrapper">
<el-table :data="tableData" style="width: 100%" :show-header="false">
<el-table-column prop="address" label="网格名"> </el-table-column>
<el-table-column prop="name" label="头像"> </el-table-column>
<el-table-column prop="name" label="姓名"> </el-table-column>
<el-table-column prop="sex" label="性别"> </el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
sex: "男",
name: "王小虎",
address: "浦口区江浦街道",
},
{
sex: "男",
name: "王小虎",
address: "浦口区江浦街道",
},
{
sex: "女",
name: "王小虎",
address: "浦口区江浦街道",
},
{
sex: "女",
name: "王小虎",
address: "浦口区江浦街道",
},
],
};
},
};
</script>
<style lang="scss" scoped>
.table-wrapper {
width: 100%;
}
.table-wrapper ::v-deep .el-table {
/* 表格字体颜色 */
color: white;
/* 表格边框颜色 */
border: 0.5px solid #fcfcfc00;
height: 80%;
}
/* 删除表格下横线 */
.table-wrapper ::v-deep .el-table::before {
left: 0;
bottom: 0;
width: 100%;
height: 0px;
}
/* 删除单元格底部横线 */
.table-wrapper ::v-deep .el-table td {
border-bottom: 0px solid #dfe6ec !important;
}
.table-wrapper ::v-deep .el-table--fit {
padding: 20px;
}
.table-wrapper ::v-deep .el-table,
.el-table__expanded-cell {
background-color: transparent;
}
.table-wrapper ::v-deep .el-table tr {
background-color: transparent !important;
}
.table-wrapper ::v-deep .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
background-color: transparent;
}
</style>
主要是这段样式起作用：
/* 删除单元格底部横线 */
.table-wrapper ::v-deep .el-table td {
border-bottom: 0px solid #dfe6ec !important;
}
自测有效果，希望对你有参考作用，样式里的.table-wrapper是div的class，这个要看你自己的class是什么。
本文地址：https://blog.csdn.net/qq_41994916/article/details/111136393