Vuetifyのv-simple-tableを使用して、最初の列にタイトルを入れたい。

Vuetify のUIコンポーネントのv-simple-tableを使用して下記のような表を作成したいと思っています。

codesandboxを使用して下記のようなコードを作成し画面を確認したのですが、
下記の写真のように、titleがずれて表示されてしまいます。

HTML
1<div id="app">
2  <v-app id="inspire">
3    <v-simple-table>
4      <template v-slot:default>
5        <thead>
6          <tr>
7            <th class="text-left">
8              Name
9            </th>
10            <th class="text-left">
11              Calories
12            </th>
13          </tr>
14        </thead>
15        <tbody>
16          <tr
17            v-for="item in desserts"
18            :key="item.name"
19          > 
20            <th>{{ item.id }}</th>
21            <td>{{ item.name }}</td>
22            <td>{{ item.calories }}</td>
23          </tr>
24        </tbody>
25      </template>
26    </v-simple-table>
27  </v-app>
28</div>

Vue.js/Vuetify.js
1new Vue({
2  el: '#app',
3  vuetify: new Vuetify(),
4  data () {
5    return {
6      desserts: [
7        {
8          id:1,
9          name: 'Frozen Yogurt',
10          calories: 159,
11        },
12        {
13          id:2,
14          name: 'Ice cream sandwich',
15          calories: 237,
16        },
17        {
18          id:3,
19          name: 'Eclair',
20          calories: 262,
21        },
22        {
23          id:4,
24          name: 'Cupcake',
25          calories: 305,
26        },
27        {
28          id:5,
29          name: 'Gingerbread',
30          calories: 356,
31        },        
32      ],
33    }
34  },
35})

どうすればタイトルがずれずに、表として表示できるのか
どなたかご教示いただけませんでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

次のようにダミーの </th> を挿入すればタイトルの行のズレを防ぐことができるかと思います。

html
1<div id="app">
2  <v-app id="inspire">
3    <v-simple-table>
4      <template v-slot:default>
5        <thead>
6          <tr>
7            <th class="text-left"></th>
8            <th class="text-left">
9              Name
10            </th>
11            <th class="text-left">
12              Calories
13            </th>
14          </tr>
15        </thead>
16        <tbody>
17          <tr
18            v-for="item in desserts"
19            :key="item.name"
20          > 
21            <th>{{ item.id }}</th>
22            <td>{{ item.name }}</td>
23            <td>{{ item.calories }}</td>
24          </tr>
25        </tbody>
26      </template>
27    </v-simple-table>
28  </v-app>
29</div>