I am currently utilizing a Vuetify table and I have a requirement to set fixed column widths based on a specific configuration. My initial approach was to directly assign the width from the configuration to the width CSS attribute.
In the first instance ( Playground ) should show a table with a total width of 350px. Upon reviewing the playground, it appears that the table is occupying the full 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 scenario ( Playground ) is expected to display a table with a total width of 6300px. The intention is for the first column to be wider than the screen, resulting in a horizontal scrollbar. However, the table automatically adjusts the width of the first column to fit 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>
I'm looking for a solution to disable this default behavior. The table should adhere to exact column widths as determined by the configuration values. Some attempts made include:
- No changes observed<v-table style="min-width: none; max-width: none">
- No visible alterations<v-table style="overflow: auto">
- Works when table is smaller than screen size, preventing scrollbar appearance<v-table style="width: max-content">
- Results in a table too small<v-table style="width: min-content">
- No discernible adjustments<v-table style="width: auto">
Despite these attempted solutions, the issue persists. Any suggestions or alternative ideas to rectify this problem?