Hi,
I want to reduce the height of the rows in a table to have a more compact view of the table.
The table has 12 rows so it covers more than a 13" screen
I've tired using a template node with the following code
<template>
<v-table density="compact">
</v-table>
</template>
<style>
.v-table {
border-collapse: collapse;
font-family: Arial, sans-serif;
}
.v-table th {
background-color: #4CAF50;
color: white !important;
font-weight: bold;
}
</style>
The section is taken from vuetifyjs but it has no impact
The section does modify the table (colours & fonts) but I've not found a way to change the row height and I've tested adding the following code in the section
.v-table tr {
line-height: 0.8; /* Reduces row height */
height: 15px !important; /* Forces row height reduction */
}
Any idea on what I can do have more compact table?
