Custom vuetify data table dividers

Question

When v-data-table is on mobile view, the divider between items is not clear. How can I custom this divider, for example linewidth and color?

What I want to do: Custom divider on mobile view

Code sample from vuetify doc

<template>
  <v-data-table
    :headers="headers"
    :items="desserts"
    :items-per-page="5"
    class="elevation-1"
  ></v-data-table>
</template>

Answer 1

You can simply override Vuetify CSS with your own styles.

Change border width from border-bottom: thin to border-bottom: medium:

Demo

https://codepen.io/aQW5z9fe/pen/QWjVYpL?editors=0100

Choose the "vertical layout" in the editor there and then resize the area to <700px width (or the window itself) to see style changes:

Styles

@media screen and (max-width: 700px) {
   .theme--light.v-data-table thead tr:last-child th, 
   .theme--light.v-data-table tbody tr:not(:last-child) td:last-child,
   .theme--light.v-data-table tbody tr td,
   .theme--light.v-data-table tbody tr:not(:last-child) td:not(.v-data-table__mobile-row) {
      border-bottom: medium solid rgba(0,0,0,.12);
   }
}

Change media query and styles to whatever values you need.