Why Vuetify tables shows inconsistent cells width? - html

Question

In Vue, I have created multiple tables in the same component's template. Those tables all have the same html template, except they use different property of data (). Somehow the column width is inconsistent between them.
<template>
<v-container>
<h2>Security</h2>
<hr>
<v-simple-table>
<template v-slot:default>
<tbody>
<tr v-for="(a, index) in user_info.security_titles"
:key="a">
<td><strong>{{ a }}</strong></td>
<td v-show="user_info.security_data">{{user_info.security_data[index]}}</td>
</tr>
</tbody>
</template>
</v-simple-table>
<br>
<h2>Connection</h2>
<hr>
<v-simple-table>
<template v-slot:default>
<tbody>
<tr v-for="(b, index) in user_info.connection_titles"
:key="b">
<td> <strong>{{ b }}</strong> </td>
<td v-show="user_info.connection_data">{{user_info.connection_data[index]}}</td>
</tr>
</tbody>
</template>
</v-simple-table>
<br>
<h2>Language</h2>
<hr>
<v-simple-table>
<template v-slot:default>
<tbody>
<tr v-for="(c, index) in user_info.language_titles"
:key="c">
<td> <strong>{{ c }}</strong> </td>
<td v-show="user_info.language_data">{{user_info.language_data[index]}}</td>
</tr>
</tbody>
</template>
</v-simple-table>
</v-container>
</template>
I have used any style

Answer 1

A table always tries to fit in the content the most nicely, so if your column contains a row with long text, that column will take up more space.
You can use the width property in your headers to have a fixed width as shown in the docs
{
text: string
value: string
align?: 'start' | 'center' | 'end'
sortable?: boolean
filterable?: boolean
divider?: boolean
class?: string | string[]
width?: string | number
filter?: (value: any, search: string, item: any) => boolean
sort?: (a: any, b: any) => number
}