Trying to modify the width of a table and its columns within a v-table, aiming to create a more compact table but facing difficulties with all attempted adjustments.
https://i.sstatic.net/fzJF4t16.png
The objective is to minimize the table's width as much as possible while maintaining equal column widths for an aesthetically pleasing appearance.
Provided code snippet:
<template lang="">
<v-dialog>
<template v-slot:activator="{ props: activatorProps }">
<v-btn
v-bind="activatorProps"
color="surface-variant"
text="Open Dialog"
variant="flat"
></v-btn>
</template>
<template v-slot:default="{ isActive }">
<v-card>
<v-table density="compact" class="border-thin" fixed-header>
<thead>
<tr>
<th class="text-left">#</th>
<th class="text-left">INFO</th>
<th class="text-left">WARN</th>
<th class="text-left">ERROR</th>
<th class="text-left">ENTRY</th>
<th class="text-left">TRACE ERROR</th>
</tr>
</thead>
<tbody>
<tr v-for="(value, key) in tracelogMaskData">
<td>
{{ key }}
</td>
(additional td elements here)
</tr>
</tbody>
</v-table>
(button options)
</v-card>
</template>
</v-dialog>
(commented-out button)
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { onMounted } from 'vue'
const masks = ref({ value: ['info', 'warn', 'error', 'threadentry', 'tracefunc'] })
</script>
<style>
.v-table > .v-table__wrapper > table > thead > tr > th,
td {
min-width: 30px !important;
}
</style>
Tried utilizing classes and css selectors for overriding default styles but unsuccessful thus far. Suggestions for necessary modifications?