Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

b-table how to set custom column header color?#7197

AnsweredbyHiws
whokc-github asked this question inQ&A
Discussion options

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 head-variant="dark">
You must be logged in to vote

Replies: 1 comment 3 replies

Comment options

Hiws
Apr 12, 2024
Maintainer

You can usethClass orthStyle on each field definition.

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

You must be logged in to vote
3 replies
@whokc-github
Comment options

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
Comment options

HiwsApr 12, 2024
Maintainer

Probably without the. in the class name.

@whokc-github
Comment options

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.

Answer selected byHiws
Sign up for freeto join this conversation on GitHub. Already have an account?Sign in to comment
Category
Q&A
Labels
None yet
2 participants
@whokc-github@Hiws

[8]ページ先頭

©2009-2025 Movatter.jp