is there a way in vuetify to adjust padding in data table?

Question

There is a default table from the vuetify docs: https://vuetifyjs.com/en/components/data-tables/basics/#expandable-rows

The default padding for the td and th elements is 16px left and right.

How can I change it to a lower value?

Thank you.

I tried adding custom css rules, but I am not good at doing that, especially if it works via frameworks

UPDATE 26/03: I have added these rules:

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

and it is still 16px. If you click on the td elememt in a dev mode in crome, you will see this:

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

I have inspected what rule is responsible for that padding copied it and it worked!

<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>

But isn't it too heavy and inelegant? Maybe there is some better approach or even via vuetify native?

Thanks!

Answer 1

So basically, that is the solution:

<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>