CODEWITHSUNDEEP
cssvue.jsvuetify.js
Alex T
Alex T

Reputation: 3764

Add spacing between rows in Vuetify v-data-table

I'm trying to change border-spacing iin the v-data-table to:

border-spacing: 0 0.5rem;

I tried setting it with css:

v-data-table > div > table {
  border-spacing: 0 0.5rem;
}

or

.v-data-table table {
  border-spacing: 0 0.5rem;
}

But both of those did not work. Any idea how can i change space between rows in v-data-table?

Upvotes: 2

Views: 8984

Answers (2)

Ram pravin
Ram pravin

Reputation: 121

You can add below selector

.v-data-table > .v-data-table__wrapper > table {
    border-spacing: 0 0.5rem;
}

Upvotes: 1

jacob13smith
jacob13smith

Reputation: 929

You need to use the deep css selector >>> to do CSS injections into other components.

For example, 

.a >>> .b { /* ... */ }

will be compiled down to 

.a[data-v-f3f3eg9] .b { /* ... */ }

So you probably want to do something like 

v-data-table >>> div > table {
  border-spacing: 0 0.5rem;
}

Upvotes: 3

Related Questions