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

I have used vuetify.js as my latest projects UI component. I try to adjust width of v-simple-table of th,td using css, but nothing happen. I want to adjust every th,td width 50px. So I made code at codepen and like below.

<template>
 <div id="app">
  <v-app id="inspire">
    <v-card width="500px">
     <v-simple-table>
      <template v-slot:default>
        <thead>
          <tr>
            <th  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>

I thought that css pass is effective to width, but never change. How do I adjust width of v-simple-table? Does anyone help me, please?

CodePudding user response：

change your style to

min-width: 50px !important;