0

Vuetify v-data-table doesn't increase font size.

How can I modify the table's content for me to be able to increase the font size of the text because its too small and hard to read.

 <v-data-table
    :headers="headers"
    :items="allCareers"
    :search="search"
    sort-by="calories"
    class="elevation-1 display-2 white--green"
  >
    <template v-slot:item.action="{ item }">
      <v-icon small class="mr-2" @click="editArticle(item.ARTICLE_NUM)">edit</v-icon>
      <v-icon small @click="deleteSingleArticle(item.ARTICLE_NUM)">delete</v-icon>
    </template>
  </v-data-table>

Style

<style scoped>
table.v-table thead tr th {
  font-size: 24px;
}
table.v-table tbody tr td {
  font-size: 24px;
}
</style>

1 Answers1

1

You can see that specificity is required to get what you want here. Using the code pen from the Vuetify documentation, these changes work on the v-data-table. Keep in mind that Vuetify has some weird CSS workarounds required without using loaders, like needing to use instead of or using !important tags.

https://vuetifyjs.com/en/components/data-tables (select "Edit in CodePen" to test these)"

.v-data-table th {
  font-size: 20px;
}

.v-data-table td {
  font-size: 20px;
}

Details on loaders and CSS details: Vuetify - CSS not working (taking effect) inside component

Arc
  • 1,028
  • 6
  • 16