bootstrap vue ２系でテーブルのヘッダーのフォントサイズが変更できない

前提・実現したいこと

bootstrap vue ２系でテーブルのヘッダーのフォントサイズが変更できません。

bodyのfont sizeに関しては公式docでクラスが適応できる説明があったのでtable-class = "table-font-size"の部分で .table-font-size{font-size: 10px;}を指定すれば変更できました。

こちらでheaderも変わってくれると思ったのですがheaderだけそのままの大きさになってしまったので、以下で色々試したのですがうまく行っておらず質問させて頂いております。

発生している問題・エラーメッセージ

該当のソースコード

vue
1<b-table
2  show-empty
3  striped
4  hover
5  fixed
6  table-class = "table-font-size"
7  :items="rankingList"
8  :fields="fields"
9  :sort-by.sync="sortBy"
10  :sort-desc.sync="sortDesc"
11  :sort-direction="sortDirection"
12>

<style>
.table-font-size{
  font-size: 10px;
}
</style>

package.json

  "dependencies": {
    "@nuxtjs/axios": "^5.3.6",
    "@nuxtjs/pwa": "^3.0.0-0",
    "bootstrap-vue": "^2.15.0",
    "chart.js": "^2.9.4",
    "chartjs-plugin-zoom": "^0.7.7",
    "node-sass": "^4.11.0",
    "nuxt": "^2.0.0",
    "sass-loader": "^7.1.0",
    "vue-chartjs": "^3.5.1",
    "vue-template-compiler": "^2.6.11",
    "vue2-transitions": "^0.3.0"
  },
  "devDependencies": {
    "@nuxtjs/eslint-config": "^2.0.0",
    "@nuxtjs/eslint-module": "^1.0.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^6.1.0",
    "eslint-plugin-nuxt": ">=0.4.2",
    "vue-cli-plugin-i18n": "^0.5.1"
  }

試したこと

ソースを読んでヘッダーのフォントサイズに関係ありそうな以下の部分を全てoverrideは試したのですがうまく行ってないです。

.table.b-table > thead > tr > .table-b-table-default {
  font-size: 10px;
}
.b-table-sticky-header > .table.b-table > thead > tr > th {
  font-size: 10px;
}
.b-table-sticky-header > .table.b-table > thead > tr > .b-table-sticky-column{
  font-size: 10px;
}
.table-responsive > .table.b-table > thead > tr > .b-table-sticky-column{
  font-size: 10px;
}
[class*="table-responsive-"] > .table.b-table > thead > tr > .b-table-sticky-column {
  font-size: 10px;
}
.table.b-table > thead > tr > .table-dark[aria-sort="none"]{
  font-size: 10px;
}
.table.b-table > thead > tr > .table-dark[aria-sort="ascending"]{
  font-size: 10px;
}
.table.b-table > thead > tr > .table-dark[aria-sort="descending"]{
  font-size: 10px;
}

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

plasticgrammer

2020/11/11 14:49

確認ですが、CSSのクラス table-font-size は、b-tableを使うコンポーネントのvueファイル内にscopedがついていないstyleで宣言しているという理解で正しいでしょうか。あと、開発者ツールにて期待しているクラスが適用されているか確認してみてください。

行動規範の内容に同意します

回答1件

対象バージョンでの検証はできていませんが、b-tableタグのthead-class属性を使用すればできるのではないでしょうか。

vue
1<b-table
2  show-empty
3  striped
4  hover
5  fixed
6  thead-class = "table-font-size"
7  :items="rankingList"
8  :fields="fields"
9  :sort-by.sync="sortBy"
10  :sort-desc.sync="sortDesc"
11  :sort-direction="sortDirection"
12>