CSS with Vuetify V-data-table

Question

I am attempting to add some table row spacing in my table. However I am not having much success. I can see my styles when I inspect the page, and they are not crossed out. Any ideas as to why I can't impose styles on my table? I have thoroughly read through some of the other vuetify posts for imposing css, but have had no success. Any thoughts?

Style:

`<style scoped>
    >>>tr {
        border-spacing: 10px;
        border:none;
    }

</style>`

Photo of console

data table code

<template>
    <v-data-table :headers="headers"
                  :items="posts"
                  :items-per-page="5"
                  hide-default-header
                  item-key="post_id"
                  class="elevation-1 browseTable"
                  :footer-props="{
      showFirstLastPage: true,
      firstIcon: 'mdi-arrow-collapse-left',
      lastIcon: 'mdi-arrow-collapse-right',
      prevIcon: 'mdi-minus',
      nextIcon: 'mdi-plus'
    }">
        <template #item.full_post="{ item }">
            <p>{{ item.title }}</p>
            <p>{{item.body }}</p>
        </template>
    </v-data-table>
</template>

steven · Accepted Answer · 2020-08-24 23:17:10Z

1

You should apply border-spacing to table, not tr. Also need to have border-collapse: separate; for this to work. Usually it's set to separate as default, but not sure if vuetify overwrites it

>>> table {
  border-spacing: 10px;
  border-collapse: separate;
}

As for the border: none, I suspect it's set on the td level. So if you want to affect that style, do:

>>> table td {
  border: none;
}

answered Aug 24, 2020 at 23:17

steven

3222 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS with Vuetify V-data-table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related