请问如何修改element表头的样式？浏览器页面不显示出应有的样式

Question

本人萌新，最近在使用element中的表格时遇到了一些问题：
请问各位大佬，在浏览器页面修改该表格中的.el-table th,加入background：#f4f4f4 样式能正常显示，但是在项目的style标签中修改再到浏览器页面就不会显示出应有的样式。

---

以下是代码：
样式：

  .el-table th{
        background:#f4f4f4 !important;
        font-size: large;
    }

表格：

<el-table
          :data="tableData"
          style="width: 100%"
          border>
          <el-table-column
            prop="doc"
            label="文件名称"
            width="290"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="发起人"
            width="290"
            header-align="center">
          </el-table-column>
          <el-table-column
            prop="situation"
            label="文件状态"
            width="290"
            header-align="center">
          </el-table-column>
          </el-table>

谢谢各位

Answer 1

楼主说的项目中，应该是指“组件内”吧？

在组件内使用其它组件的时候，有些样式的设置是无效的。
比如你的test.vue中使用了el-table这个组件，但 .el-table th 这个元素在test.vue中并不存在，而是在el-table这个组件内，那么，你在test.vue 中设置 .el-table th的样式是无效的，这应该跟vue的渲染机制有关。

把.el-table th的样式写到全局的css文件中就好了。

Answer 2

检查你的style标签中是否含有scoped属性, 因为含有scoped标签只能对当前组件的样式生效, 你需要再写一个style标签把你需要的样式写在里面

    <style>
          .el-table th{
            background:#f4f4f4 !important;
            font-size: large;
           }
    </style>

推荐给当前组件添加id或class,以避免全局样式的污染.

    <style>
          .my-table.el-table th{
            background:#f4f4f4 !important;
            font-size: large;
           }
    </style>

解决了问题记得给个赞哦~

Answer 3

解决方案
样式：

.el-table .table-head-th{
        background-color:#f4f4f4;
        font-size: large;
    }

表格：

<el-table
          :data="tableData"
          style="width: 100%"
          :header-cell-class-name="tableheaderClassName"
          border>
          <el-table-column
            prop="doc"
            label="文件名称"
            width="290"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="发起人"
            width="290"
            header-align="center">
          </el-table-column>
          <el-table-column
            prop="situation"
            label="文件状态"
            width="290"
            header-align="center">
          </el-table-column>
          </el-table>

javascript :

export default {
    methods: {
        tableheaderClassName({ row, rowIndex }) {
          return "table-head-th";
        },
        ....
    },
    data(){
      return { ... }
    }
}

Answer 4

遇到同样的问题，请问解决了吗