I want the v-data-table to be displayed as the image given
Expected data table display

But v-data-table contents and headers are displayed as well as given in the below image
Obtained data table display

This has to be achieved for mobile devices only.

I have written code for v-data-table as below,

<v-data-table
  v-if="makeDevicelist"
  :headers="makeHeaders"
  :items="makeDevicelist"
  :items-per-page="10"
  :item-class="itemRowBackground"
  :key="makeDevicelist.deviceId"
  :items-per-page-options="itemsPerPageOptions"
  items-per-page-text="表示件数:"
  :single-select="true"
  item-key="deviceId"
  show-select
  v-model="selectedItems"
  @click:row="OnClick"
  class="elevation-0 mb-10"
  :footer-props="footerProps"
  @pagination="paginate"
  :loading="isGettingDeviceLists"
  @update:options="updateOptions"
  return-object
>
  <template v-slot:top="{ pagination, options, updateOptions }">
    <v-data-table-footer
      :pagination="pagination"
      :options="options"
      @update:options="updateOptions"
      :items-per-page-text="itemsPerPageText"
      :items-per-page-options="itemsPerPageOptions"
      :show-first-last-page="true"
      id="d-table-header"
    >
    </v-data-table-footer>
  </template>

  <!-- for removing select all checkbox from device list -->
  <template v-slot:[`header.data-table-select`]></template>

  <template v-slot:[`item.icon`]="{ item }">
    <td><v-img :src="selectIcon(item)" contain width="50px"></v-img></td>
  </template>
  <template v-slot:[`item.deviceName`]="{ item }">
    <td :style="switchNameStyle(item)">{{ item.deviceAndUserNameStr }}</td>
  </template>
  <template v-slot:[`item.cocoroOfficeId`]="{ item }">
    <td :style="switchNameStyle(item)">{{ item.cocoroOfficeId }}</td>
  </template>
  <template v-slot:[`item.lastAccessTimeString`]="{ item }">
    <td :style="switchSizeStyle(item)">{{ item.lastAccessTimeString }}</td>
  </template>
  <template v-slot:[`item.backupSizeString`]="{ item }">
    <td :style="switchSizeStyle(item)">{{ item.backupSizeString }}</td>
  </template>
  <template v-slot:[`item.localUpdateTimeString`]="{ item }">
    <td :style="switchSizeStyle(item)">{{ item.localUpdateTimeString }}</td>
  </template>
</v-data-table>

And code to display header is,

const makeHeaders = computed((): any => {
      let header;
      let headers2;

      if (deviceStore.currentMode == "FAX") {
        header = [
          {
            title: "デバイス名:",
            value: "deviceName",
            key: "deviceName",
            width: "50%",
          },
          {
            title: "ファイル数:",
            value: "deviceBackupFileNum",
            key: "deviceBackupFileNum",
            width: "50%",
          },
          {
            title: "最終受信日時:",
            key: "lastAccessTimeString",
            value: "lastAccessTimeString",
            width: "50%",
          },
          {
            title: "使用量:",
            value: "backupSizeString",
            key: "backupSizeString",
            width: "50%",
            sortable: false,
          },
        ];

        headers2 = [
          {
            title: "",
            value: "icon",
            key: "icon",
            width: "5%",
            sortable: false,
            class: "px-0",
          },
          {
            title: "デバイス名",
            value: "deviceName",
            key: "deviceName",
            width: "30%",
          },
          {
            title: "ファイル数",
            value: "deviceBackupFileNum",
            key: "deviceBackupFileNum",
            width: "30%",
          },
          {
            title: "最終受信日時",
            value: "lastAccessTimeString",
            key: "lastAccessTimeString",
            width: "25%",
          },
          {
            title: "使用量",
            value: "backupSizeString",
            key: "backupSizeString",
            width: "10%",
            sortable: false,
          },
        ];
      } else {
        header = [
          {
            title: "デバイス名 (ユーザー名):",
            value: "deviceName",
            key: "deviceName",
            width: "50%",
          },
          {
            title: "COCORO OFFICE ID:",
            value: "cocoroOfficeId",
            key: "cocoroOfficeId",
            width: "50%",
          },
          {
            title: "最終バックアップ日時:",
            key: "lastAccessTimeString",
            value: "lastAccessTimeString",
            width: "50%",
          },
          {
            title: "使用量:",
            key: "backupSizeString",
            value: "backupSizeString",
            width: "50%",
            sortable: false,
          },
        ];

        headers2 = [
          {
            title: "",
            key: "icon",
            value: "icon",
            width: "5%",
            sortable: false,
            class: "px-0",
          },
          {
            title: "デバイス名 (ユーザー名)",
            key: "deviceName",
            value: "deviceName",
            width: "30%",
          },
          {
            title: "COCORO OFFICE ID",
            key: "cocoroOfficeId",
            value: "cocoroOfficeId",
            width: "30%",
          },
          {
            title: "最終バックアップ日時",
            key: "lastAccessTimeString",
            value: "lastAccessTimeString",
            width: "25%",
          },
          {
            title: "使用量",
            key: "backupSizeString",
            value: "backupSizeString",
            width: "10%",
            sortable: false,
          },
        ];
      }

      if (Width.value < 600) {
        return header;
      }
      return headers2;
    });

IF I add conditions to display headers also this is not fixed.
The vuetify version used is “vuetify”: “3.5.18”.

Kindly, check the issue and provide relavant solution.