前端vue-改造el-table,表头,表格(边框,背景色)
之前用过 >>> <<< deep,这些进行样式改进,都不行,发现得用“表所在div名字 ::v-deep .el-table tr”这样的格式才能更改。项目需求,表格只有最外面有边框,里面无分割线,且表头和表身的颜色不同。/* 表格内背景颜色 *//* 表格内背景颜色 */
项目需求,表格只有最外面有边框,里面无分割线,且表头和表身的颜色不同
CSS代码如下
/* 表格内背景颜色 */
.tableMap ::v-deep .el-table th {
//background-color: transparent !important;
background-color: rgba(137, 42, 42, 0.5);
border: none !important;
//表格字体颜色
color: #ffffff;
}
/* 表格内背景颜色 */
// .tableMap ::v-deep .el-table th,
.tableMap ::v-deep .el-table tr,
.tableMap ::v-deep .el-table td {
background-color: rgba(137, 42, 42, 0.1) !important;
//background-color: rgba(137, 42, 42, 0.5);
//表格字体颜色
color: #ffffff;
}
关键点:
之前用过 >>> <<< deep,这些进行样式改进,都不行,发现得用 “表所在div名字 ::v-deep .el-table tr” 这样的格式才能更改。
额外内容:
除了在css中修改,还可以在以下代码中修改
<el-table
:data="tableData"
:header-cell-style="{background:'rgba(104,13,14,0.7)',height:'30px',color:'#fff',border: '1px solid tan', 'text-align':'center'}"
:cell-style="{'text-align':'center'}"
stripe
style="width: 100%;">
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐

所有评论(0)