• • bounty将在5天后过期**。回答此问题可获得+50的声望奖励。baitendbidz正在寻找规范答案。

目前不支持Vuetify 3表格的网格线（https://github.com/vuetifyjs/vuetify/issues/16336）
所以我添加了自定义CSS（复制链接）

<template>
  <v-app>
    <v-main>
        <v-container>
          <v-table fixed-header height="300px">
            <thead>
              <tr>
                <th>First header</th>
                <th>Second header</th>
                <th>Third header</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="index in 30">
                <td>{{ index }}</td>
                <td>{{ index }}</td>
                <td>{{ index }}</td>
              </tr>
            </tbody>
          </v-table>
        </v-container>
    </v-main>
  </v-app>
</template>

<style>
/* https://github.com/vuetifyjs/vuetify/issues/16336 */
table {
  border: 1px solid rgb(var(--v-border-color), var(--v-border-opacity));
}

table th + th {
  border-left: 1px solid rgb(var(--v-border-color), var(--v-border-opacity));
}

table td + td {
  border-left: 1px solid rgb(var(--v-border-color), var(--v-border-opacity));
}
</style>

这似乎工作正常，但有一个问题...当向下滚动时，固定标题会丢失顶部边框。
你知道怎么修正吗？我的CSS不完整吗？