When printing Chrome + Edge cut off last elements, Firefox adds multiple blank pages between

Given a Vuetify app displaying a table where everything is calculated. For this case I’m displaying a minimalistic “Print Spreadsheet View”, so users can print it via Browser. Unfortunately when doing so

• Chrome and Edge cut off some of the last table rows
• Firefox adds multiple blank pages between the table

I tried to reproduce it with this code ( playground link )

App.vue

<script setup lang="ts">
  import PrintSpreadsheetView from "./PrintSpreadsheetView.vue";
</script>

<template>
  <v-app>
    <v-main>
      <PrintSpreadsheetView />
    </v-main>
  </v-app>
</template>

<style>
  main {
    height: 100vh;
    display: flex;
    flex-direction: column;
  }

  .v-table__wrapper table {
    table-layout: fixed;
    width: 0 !important;
  }
</style>

PrintSpreadsheetView.vue

<template>
  <v-table>
    <colgroup>
      <col :style="{ width: '200px' }" />
    </colgroup>
    <thead>
      <tr>
        <th>Col</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="rowIndex in 300">
        <td>cell at row {{rowIndex}}</td>
      </tr>
    </tbody>
  </v-table>
</template>

I know that the CSS from App.vue is the problem, but this component provides some CSS for all “Spreadsheet” views.

Does someone know how to fix the CSS for the print component? Is it possible to deny this one? Or should I copy the CSS from App.vue to all other views except the print one?