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
