How to pass a fixed width to a column in a Vuetify HTML table?

I'm using a Vuetify table and based on a configuration I want to set fixed column widths. I thought it would be fine to assign the width from the configuration to the width CSS attribute.

The first example ( Playground ) should display a table with a total width of 350px. When having a look at the playground you will see that the table takes the whole screen width instead.

<template>
  <v-table>
    <thead>
      <tr>
        <th style="width: 300px">Col 1</th>
        <th style="width: 50px">Col 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Item 1</td>
        <td>Item 2</td>
      </tr>
    </tbody>
  </v-table>
</template>

The second example ( Playground ) should display a table with a total width of 6300px. The first column should be too big for the screen so there should be a horizontal scrollbar. Instead the table shrinks the first column down to a smaller width so the whole table fits the screen width.

<template>
  <v-table>
    <thead>
      <tr>
        <th style="width: 6000px">Col 1</th>
        <th style="width: 300px">Col 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Item 1</td>
        <td>Item 2</td>
      </tr>
    </tbody>
  </v-table>
</template>

How can I disable this behaviour? The table should have exact columns widths ( based on the configuration values ). I tried

• <v-table style="min-width: none; max-width: none"> no changes
• <v-table style="overflow: auto"> no changes
• <v-table style="width: max-content"> works if table is smaller than screen size, prevents scrollbar
• <v-table style="width: min-content"> is too small
• <v-table style="width: auto"> no changes

but unfortunately that didn't fix it. Do you have any ideas?

You can use CSS to achieve this. First you must use this CSS for the <table> tag:

.v-table__wrapper table {
  table-layout: fixed;
  width: 0 !important;
}

EDIT:

From the new example you provided in the comment, which involves colspan and rowspan, you need to set all the fixed width explicitly.

here is the edited demo

Old answer:
And then you can define the width for the columns using nth-child() CSS selector:

.v-table__wrapper table th:nth-child(1),
.v-table__wrapper table td:nth-child(1) {
  width: 300px;
}

.v-table__wrapper table th:nth-child(2),
.v-table__wrapper table td:nth-child(2) {
  width: 50px;
}

here is the working demo in playground

You can simply achieve this requirement by adjusting the styles for table and the row elements.

Current styles (Default) :

.v-table > .v-table__wrapper > table {
  width: 100%;
  border-spacing: 0;
}

Modified style as per the requirement :

.v-table > .v-table__wrapper > table {
  width: 0;
  border-spacing: 0;
  table-layout: fixed;
  text-wrap: nowrap;
}

.v-table__wrapper > table > tbody > tr > td {
  overflow: auto;
}