b-table how to set custom column header color?

[whokc-github]

Hi all, I'm a beginner in Vue and Bootstrap-vue. Recently I added a b-table to my project, but can't find a way to define a custom color for column headers. All I can find is setting the "head-variant" to "light or "dark", but this is not what user wants. Could you please advise ? Many thanks.

<b-table :items="recordList" :fields="tableFields" :sort-by="sortBy" :sort-desc="sortDesc" bordered
                outlined responsive class="disclaimer-table" head-variant="dark">

[Hiws]

You can use thClass or thStyle on each field definition.

https://bootstrap-vue.org/docs/components/table#field-definition-reference

[whokc-github]

Thanks. So if I defined a style in my main .css file, say, ".column-style", can I write something like this?

fields: [
          {
            key: 'last_name',
            sortable: true,
            thClass: '.column-style',
          },
          {
            key: 'first_name',
            sortable: false
          },

[Hiws]

Probably without the . in the class name.

[whokc-github]

Thanks. I can update the border now. As for background color, it was overwritten by some existing styles. I guess I can live with using head-variant="light" then. Thanks again.