1

I am trying to increase the font size of the headers to make it more distinctive to the rows in the table which is plot using v-data-table. I refereed to the solutions in the similar questions Question 1 and Question 2 but the solutions didn't seem to work. Attached is also the code which is responsible for the text size of the header which is edited using the Google Developer Tool ( Inspect Element). Any advices on where or how I can edit this part of the code

Inspect Element for the Table Head

Code :

<v-data-table
              :headers="tableFields"
              :items="programs"
              :items-per-page="5"
              class="elevation-1">
                    <template v-slot:[`item._id.$oid`]="{ item }">
                      {{item._id.$oid}}
                    </template>
</v-data-table>

Script Code :

 data () {
      return {
        tableFields: [
          {text:'ID',value:'_id.$oid'},
          {text:'Tag',value:'tags'},
          {text:'Score (Product)',value:"scores.product",},
          {text:'Last Modified Date',value:'DateModified'},  
          {text: 'Actions', value: 'action', sortable: false, align: 'center'},
        ],
Blacky_99
  • 155
  • 4
  • 20

2 Answers2

1

Use this style to increase the header font size:

.v-data-table .v-data-table-header tr th {
  font-size: 24px !important;
}

demo

tony19
  • 125,647
  • 18
  • 229
  • 307
0

Apply a style that specifically targets the v-data-table header class:

thead.v-data-table-header th[role=columnheader] {
  font-size: 14px !important;
}
VerySeriousSoftwareEndeavours
  • 1,713
  • 3
  • 31
  • 57
  • I added the code under style tags in the same file but it doesn't seem to make any difference – Blacky_99 Jun 16 '21 at 04:27
  • There are a number of possibilities as to why it may not work. Could have been applied to a different component, front end cache might need to be cleared, etc. Without having a code sample of the component that contains the data-table it is diffcult to distinguish why without simply making guesses. – VerySeriousSoftwareEndeavours Jun 16 '21 at 04:30
  • The style needed to be modifed to target the role of the th tag, not the class of the th tag. I edited the answer to reflect the style change and just tested it with Vuetify 2.x. – VerySeriousSoftwareEndeavours Jun 16 '21 at 04:42