Question

我想在Vuetify表<th>中将v-data-table的字体大小增加到20px。但它保持在12px。

我尝试过：

table.v-table thead tr th {
  font-size: 20px!important;
}

这是我的数据表：

<v-data-table
        :headers="headers"
        :items="myjson"
        class="elevation-1"
      >
        <template v-slot:items="props">
         <td>{{ props.item.ApplicationType }}</td>
        </template>
</v-data-table>

我希望thead的字体大小为20px。但是在检查时仍保持在12px。

Answer 1

新的更新应该是这个

.v-data-table > .v-data-table__wrapper > table > tbody > tr > th,
.v-data-table > .v-data-table__wrapper > table > thead > tr > th,
.v-data-table > .v-data-table__wrapper > table > tfoot > tr > th {
   font-size: 20px !important;
}

Answer 2

我有同样的问题。这是我的解决方法：

table.v-table thead th {
      font-size: 20px !important;

 }

如果要使用以下方式更改<td>：

table.v-table tbody td {
    font-size: 18px !important;
}

确保将其全局添加。即在 App.vue 中。

我希望这会有所帮助：）

Answer 3

在 Vuetify 中，我使用 lang = "scss" 解决了

.v-data-table::v-deep th {
  font-size: 14px !important;
}
.v-data-table::v-deep td {
  font-size: 12px !important;
}

Answer 4

如果你使用 vuetify 你可以托盘

    .v-data-table ::v-deep th
        font-size: 16px !important
    .v-data-table ::v-deep td
        font-size: 16px !important

Answer 5

在当前版本中，您实际上可以为此设置一个 Sass 变量：

$data-table-regular-header-font-size: map-deep-get($headings, 'caption', 'size') !default;

https://vuetifyjs.com/en/api/v-data-table/#sass-data-table-regular-header-font-size

Answer 6

.v-data-table > .v-data-table__wrapper > table > tbody > tr > th, .v-data-table > .v-data-table__wrapper > table > thead > tr > th, .v-数据表 > .v-data-table__wrapper > 表 > tfoot > tr > th

{

字体大小：0.75rem;

高度：48px;

}

更改 rem 大小。

如何增加v-data-table标题中的字体大小

6 个答案: