vue使用elment ui 自定义按钮样式/改变el-table的样式详解，解决表格线不对齐

vue使用element ui里面el-table样式的修改

效果：

HTML：

<el-table :header-cell-style="{
       
       background:'rgb(240,249,235)',color:'#606266'}" border 
      style="width: 100%">
      <el-table-column prop="id" label="菜品编号" sortable>
      </el-table-column>
    </el-table>

css

//表格字体居中
 /deep/.el-table .cell {
    
    
    text-align: center;
  }
  //鼠标移入效果
   /deep/.el-table--enable-row-hover .el-table__body tr:hover > td {
    
    
        background-color:rgb(249, 253, 247);
        color: rgb(156, 230, 116);
    }

补充：解决表格线不对齐（放在app.vue文件下面）

body .el-table th.gutter {
    
    
    display: table-cell !important
}

---

注意为什么使用/deep/看我上一篇播客说明;el-button样式修改