Change background color of header row for element-ui

Issue

I am using element-ui for adding a table with some data in a Vue project. I wish to change the background color only for the header row. How can I achieve that?

Things I've tried:

Added a custom class to :row-class-name prop:

<el-table :row-class-name="headerStyle">

(In methods)

headerStyle() {
   return 'customClass'
}

In style tags in the same .vue file:

.el-table .customClass {
/*Custom CSS*/
}

Solution

You could set the table header's background with the header-cell-style prop:

<el-table :header-cell-style="{ background: 'blue' }">

demo

Or you could apply a style to a class name specified by header-cell-class-name:

<el-table header-cell-class-name="my-header">

<style>
.my-header {
  background: blue !important; // !important needed here to override default style
}
</style>

Answered By - tony19