如何在Vuetify.js组件中调整v-simple-table列宽

Question

我使用了vuetify.js作为我最新的项目UI组件。我尝试使用css调整th，td的v-simple-table的宽度，但什么也没发生。我想调整每th，td宽度50px。所以我在codepen上做了代码，如下所示。

<template>
<div id="app">
<v-app id="inspire">
<v-card width="500px">
<v-simple-table>
<template v-slot:default>
<thead>
<tr>
<th class="text-left" v-for="n in 20">
{{n}}
</th>
</tr>
</thead>
<tbody>
<tr>
<td v-for="n in 20">{{ n }}</td>
</tr>
</tbody>
</template>
</v-simple-table>
</v-card>
</v-app>
</div>
</template>
<style scoped>
.v-data-table > .v-data-table__wrapper > table > thead > tr > th,td {
width: 50px !important;
}
</style>

我认为css pass对宽度有效，但从未改变。如何调整v-simple-table的宽度？有人帮我吗？

Answer 1

将您的风格更改为

min-width: 50px !important;