8

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.

DjSh
  • 2,776
  • 2
  • 19
  • 32
Boidurja Talukdar
  • 676
  • 2
  • 21
  • 42

7 Answers7

11

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 :)

DjSh
  • 2,776
  • 2
  • 19
  • 32
6

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;
}
PassionCorner
  • 81
  • 1
  • 2
5

In Vuetify, I solved using lang = "scss"

.v-data-table::v-deep th {
  font-size: 14px !important;
}
.v-data-table::v-deep td {
  font-size: 12px !important;
}
Nathan Maia
  • 61
  • 1
  • 2
1

if you use vuetify you can tray

    .v-data-table ::v-deep th
        font-size: 16px !important
    .v-data-table ::v-deep td
        font-size: 16px !important
khanhblue95
  • 11
  • 1
1

There's actually a Sass variable that you can set for this in the current version:

$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

Thomas Kuhlmann
  • 943
  • 7
  • 18
1

None of the solutions presented here worked for me. This is my data table:

<v-data-table
       :headers="headers"
       :items="items"
       :items-per-page="5"
       class="elevation-0 table"
       :footer-props="{ 'items-per-page-text': 'Items por página' }"
       :search="search"
     >

And what worked for me was this:

The font of the header

.table >>> th {
  font-size: 1.8rem !important; 
}

Other fonts from the table

.table >>> tr>td{
  font-size:1.4rem !important;
}

.table >>> .v-data-footer__select,
.table >>> .v-select__selection,
.table >>> .v-data-footer__pagination{
  font-size:1rem;
}
Maria Clara Holanda
  • 11
  • 1
0
.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: 0.75rem;
    
    height: 48px;

}

change the rem size.

Slava Rozhnev
  • 9,510
  • 6
  • 23
  • 39
Antonio Castillo
  • 1