Cuando se muestra un DataTable en la pantalla de un teléfono inteligente en orientación vertical, las filas originales se separan y la apariencia no es la ideal. Lo mismo es ideal cuando el teléfono inteligente se muestra en modo horizontal.

Necesito ayuda con una de las siguientes dos soluciones ・Mantener la apariencia predeterminada en modo vertical.・Repara la pantalla horizontal.

El entorno usa vue.js, no hay componentes de una sola página ni vuerouter.

 <v-main id="main" class="blue-grey lighten-4"> <v-container fluid fill-height> <v-card> <v-card-title> DELE - A1 <v-spacer></v-spacer> <v-text-field v-model="search" append-icon="mdi-magnify" label="Búsqueda" single-line hide-details multi-sort show-select dense></v-text-field> </v-card-title> <v-data-table :headers="headers" :items="desserts" :search="search"></v-data-table> </v-card> </v-container> </v-main>

 let vue = new Vue({ el: '#app', vuetify: new Vuetify(), data: { search: '', headers: [ { text: 'Español', value: 'spanish', }, { text: 'Japonés', value: 'japanese' }, ], desserts: [ { spanish: "Español", japanese: "スペイン語", }, { spanish: "Japonés", japanese: "日本語", }, ], }, })

ingrese la descripción de la imagen aquí