Bootstrap-vue: How to apply custom CSS to the b-table's thead element

[tpines]

In the table.vue code, CSS returned from the headClass computed property is applied to the thead element. The headClass computed property is derived by concatenating 'thead-' with the documented headVariant property:

  head-variant  Use default or inverse to make <thead> appear light or dark gray, respectively

A user can defined their own CSS class with a 'thead-' prefix (ie. '.thead-my-css'), then pass 'my-css' to the table's headVariant property. Although this approach works well, it relies on implementation details that are not documented.

I'm requesting that either the approach be documented so that one can be reasonably sure that it will be available in subsequent releases, or, that a new property be added to b-table to allow a user to apply their custom CSS to the thead.

[tmorehouse]

You can get around this for now my using custom CSS targeting. Apply a class to the b-table, and then target the head:

.myTable thead {
   /* custom CSS styles here for <thead> element */
}

<b-table class="myTable" ... >
</b-table>

[tpines]

Thanks @tmorehouse ! Much better than my approach.

[SimonFricker]

Note. If you are using a scoped style tag. If you want to target subcomponents, you'll need to use a deep selector to target them properly.

<style scoped>
 /deep/ myTable thead {
    background-color: green;
  }
</style>