How do I increase the font-size in the header of v-data-table

Question

I want to increase the font-size of the <th> to 20px in Vuetify table v-data-table. But it stays at 12px.

I tried this:

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

This is my data table:

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

I expect the font-size of the thead to be 20px. But it remains at 12px while inspecting.

Answer 1

I had the same problem. Here is how I solved it:

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

 }

If you want to change the <td> using:

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

Make sure to add that globally. i.e in App.vue.

I hope it helps :)

Answer 2

The new update should be this now

.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;
}