vuetify 有没有办法调整数据表中的填充？

Question

vuetify 文档中有一个默认表： https://vuetifyjs.com/en/components/data-tables/basics/#expandable-rows

td 和 th 元素的默认内边距左右各 16px。

如何将其更改为更低的值？

谢谢你。

我尝试添加自定义CSS规则，但我不擅长这样做，特别是如果它通过框架工作的话

2003 年 26 月更新： 我添加了这些规则：

<style>
  .custom-cell-padding > tbody > tr > td {
    padding-top: 4px; /* Adjust as needed */
    padding-bottom: 4px; /* Adjust as needed */
  }
</style>

它仍然是 16px。如果您在 crome 的开发模式下单击 td elememt，您将看到以下内容：

<td class="v-data-table__td v-data-table-column--align-start">DATA<td>

我已经检查了哪些规则负责填充复制它并且它起作用了！

<style>
  .v-table > .v-table__wrapper > table > tbody > tr > td,
  .v-table > .v-table__wrapper > table > tbody > tr > th,
  .v-table > .v-table__wrapper > table > thead > tr > td,
  .v-table > .v-table__wrapper > table > thead > tr > th,
  .v-table > .v-table__wrapper > table > tfoot > tr > td,
  .v-table > .v-table__wrapper > table > tfoot > tr > th {
    padding: 0 4px;
    transition-duration: 0.28s;
    transition-property: box-shadow, opacity, background, height;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
</style>

但是是不是太重、太不雅观了？也许有更好的方法，甚至通过 vuetify Native？

谢谢！

Answer 1

基本上，这就是解决方案：

<style>
  .v-table > .v-table__wrapper > table > tbody > tr > td,
  .v-table > .v-table__wrapper > table > tbody > tr > th,
  .v-table > .v-table__wrapper > table > thead > tr > td,
  .v-table > .v-table__wrapper > table > thead > tr > th,
  .v-table > .v-table__wrapper > table > tfoot > tr > td,
  .v-table > .v-table__wrapper > table > tfoot > tr > th {
    padding: 0 4px;
  }
</style>