I've been struggling to change the font size of the headers in my v-data-table. No matter what I try, the font doesn't seem to update. I even experimented with the Chrome developer tool and managed to make it work there. However, when I attempt to apply the same nested CSS class pattern in my code, the font remains unchanged. I referred to this source, but it didn't solve the issue. Below is a snippet of my code.
Vuetify Code:
<v-data-table :headers="headers" :items="modifiedFilterValue" :search="search" flat>
<template v-slot:[`item.start_date`]="{ item }">
<td :class="isLinethrough(item)">
<span>{{ getUserSessionDate(item.start_date, item) }}</span>
</td>
</template>
</v-data-table>
CSS Browser Devtool Snippet:
https://i.sstatic.net/lZd9b.png
The CSS Code I Used:
.theme--light.v-data-table > .v-data-table__wrapper > table > thead > tr:last-child > th{
font-size: 2px !important;
}
If you have any insight on where I might be going wrong, please let me know.