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是什么。

elementUI table 修改表格背景色，去除单元格底部横线相关推荐

vue使用element-ui table 清除表格背景色以及表格边框线
看代码前端代码为 <div class="main_table t_btn2">// 设置表格背景色,字体颜色以及字体大小<el-table :header-c ...
php 相同数据合并单元格,elementUI table合并相同数据的单元格
直接扔代码~ import moment from "moment"; export default { methods: { objectSpanMethod({ row, co ...
layui table 表头合并_layui 动态表格之合并单元格
需求: 下面用excel表格大概模拟下需求,左边是原来的,要改成右边这样的: ①第一步:再生成表格后调用此方法,以合并重复的单元格 done : function(res, curr, count) ...
如果去掉数学前后的空格_如何取消excel表格中数据前的空格-Excel 如何去除单元格中数字前后的空格...
excel单元格,数字前有空格(字符),怎么批量把空... 使用替换功能,批量处理参考excel版本:2010(其他版本操作基本相同) 详细操作步骤及动画演示: 1.CTRL H,调出替换对话框 2 ...
Markdown编辑表格实现合并单元格、单元格内容换行
Markdown虽然没有合并单元格的语法,但是Markdown是兼容HTML的,因此,我们可以通过HTML的方式实现单元格合并. 跨行合并使用 rowspan 属性跨列合并使用 colspan 属性 ...
python合并word表格单元格_python docx模块读取word表格遇到合并单元格时的处理
python docx模块读取word表格遇到合并单元格时的处理 python docx模块读取word表格遇到合并单元格时的处理 python docx模块读取word表遇到合并单元格时的处理通 ...
html如何取单元格内容,JS获取表格内指定单元格html内容的方法
JS获取表格内指定单元格html内容的方法本文实例讲述了JS获取表格内指定单元格html内容的方法.分享给大家供大家参考.具体如下: 下面的代码先通过表格对象的rows获得指定的行的所有单元格数组, ...
Layui数据表格监听单元格编辑恢复原值
Layui数据表格监听单元格编辑,并获取原值 table.on('edit(test)', function(obj){ //注:edit是固定事件名,test是table原始容器的属性 lay-fi ...
FineUI大版本升级，外置ExtJS库、去AXD化、表格合计行、表格可编辑单元格的增删改、顶部菜单框架
FineUI v3.3.0 更新的内容非常多,所以一下子从 v3.2.6 连跳 3 个小版本,直接来到了 v3.3.0.详细的更新记录请参考这里:http://fineui.com/version 主 ...

elementUI table 修改表格背景色，去除单元格底部横线

想把表格的背景设置成透明的，弄了很长时间表格是透明了，就是单元格的横线一直去不掉

elementUI table 修改表格背景色，去除单元格底部横线相关推荐

最新文章

热门文章