如何减少v-table vuetify中列之间的间距？

Question

我正在尝试调整 v-table 内的表格和列的宽度，并希望使表格更加紧凑。但是，它们都不起作用。

我希望这个表格具有尽可能最小的宽度和相等的列宽，并且我想让它看起来美观。

这是代码

<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>
              <td>
                <v-checkbox
                  v-bind:id="`info${key}`"
                  :value="`info${key}`"
                  v-model="checkedData"
                ></v-checkbox>
              </td>
              <td>
                <v-checkbox
                  v-bind:id="`warn${key}`"
                  :value="`warn${key}`"
                  v-model="checkedData"
                ></v-checkbox>
              </td>
              <td>
                <v-checkbox
                  v-bind:id="`error${key}`"
                  :value="`error${key}`"
                  v-model="checkedData"
                ></v-checkbox>
              </td>
              <td>
                <v-checkbox
                  v-bind:id="`threadentry${key}`"
                  :value="`threadentry${key}`"
                  v-model="checkedData"
                ></v-checkbox>
              </td>
              <td>
                <v-checkbox
                  v-bind:id="`tracefunc${key}`"
                  :value="`tracefunc${key}`"
                  v-model="checkedData"
                ></v-checkbox>
              </td>
            </tr>
          </tbody>
        </v-table>
        <hr />
        <v-row class="justify-end">
          <v-col cols="1">
            <v-btn block color="black" rounded="2" @click="applyTraceMaskChanges()">Apply </v-btn>
          </v-col>
          <v-col cols="1">
            <v-btn block color="black" rounded="2" @click="clearTraceMaskChanges()"
              >Clear all
            </v-btn>
          </v-col>
          <v-col cols="1">
            <v-btn block color="black" rounded="2" @click="selectAll()">Select all </v-btn>
          </v-col>
        </v-row>
        <!-- <v-btn variant="plain" @click="applyTraceMaskChanges()">Select all </v-btn> -->
      </v-card>
    </template>
  </v-dialog>
  <!-- <v-btn block color="black" rounded="2"> DEBUG SELECTION </v-btn> -->
</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>

我尝试使用类来覆盖默认类以及 CSS 选择器。我应该做出哪些改变？

Answer 1

表格的最小宽度是通过更改其容器（在您的例子中为 v-card）的宽度来实现的。并且不要忘记删除不必要的样式。