项目需求,表格只有最外面有边框,里面无分割线,且表头和表身的颜色不同

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%;">

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐