如何调整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 对width有效，但一直没变。如何调整 v-simple-table 的宽度？有人帮我吗？

Answer 1

将您的风格更改为

min-width: 50px !important;

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

How to adjust v-simple-table column width in Vuetify.js component?

css

vue.js

vuetify.js