Why Vuetify tables shows inconsistent cells width?

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
}