On a smartphone screen in portrait orientation, displaying a DataTable results in the original rows being separated and an imperfect appearance. However, when the smartphone is in landscape mode, the display is ideal.
I am seeking assistance with one of the following solutions: ・Maintaining the default look and feel in portrait mode. ・Resolving any issues with the landscape screen display.
The current environment utilizes vue.js without single-page components or Vue Router.
<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: "日本語",
},
],
},
})