Struggling to add extra spacing between table rows, despite inspecting the page and verifying that my styles are not being overridden. Have read other Vuetify posts on applying CSS but still no luck. Any suggestions for why I can't style my table as desired?
Custom Style:
`<style scoped>
>>>tr {
border-spacing: 10px;
border:none;
}
</style>`
Screenshot of Console Error: https://i.stack.imgur.com/84tPX.png
Data Table Component 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>