CODEWITHSUNDEEP
cssvue.jsvuetify.js
Bean0341
Bean0341

Reputation: 1697

CSS with Vuetify V-data-table

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 enter image description here

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>

Upvotes: 0

Views: 1960

Answers (1)

steven
steven

Reputation: 322

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

Upvotes: 1

Related Questions