前端vue-改造el-table，表头，表格（边框，背景色）

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

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中修改，还可以在以下代码中修改

 

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