Vuetify固定表头表格滚动时丢失上边框问题求助

问题原因 #

启用fixed-header后，Vuetify会将表头（<thead>）克隆到一个独立的固定定位容器中（.v-table-header-wrapper内的table），你当前的CSS仅给原始表格添加了边框，没有对这个克隆的表头表格设置样式，导致滚动时表头丢失上边框。

修正后的CSS代码 #

/* 给原始表格和克隆的表头表格都添加上边框 */
.v-table table, .v-table-header-wrapper table {
  border: 1px solid rgb(var(--v-border-color), var(--v-border-opacity));
}

/* 表头单元格左侧边框，同步原始表格与克隆表头 */
.v-table table th + th, .v-table-header-wrapper table th + th {
  border-left: 1px solid rgb(var(--v-border-color), var(--v-border-opacity));
}

/* 内容单元格左侧边框 */
.v-table table td + td {
  border-left: 1px solid rgb(var(--v-border-color), var(--v-border-opacity));
}

/* 可选：添加表头底部边框，强化表头与内容的分隔 */
.v-table thead tr th, .v-table-header-wrapper thead tr th {
  border-bottom: 1px solid rgb(var(--v-border-color), var(--v-border-opacity));
}

完整代码示例 #

<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" :key="index">
                <td>{{ index }}</td>
                <td>{{ index }}</td>
                <td>{{ index }}</td>
              </tr>
            </tbody>
          </v-table>
        </v-container>
    </v-main>
  </v-app>
</template>

<style>
.v-table table, .v-table-header-wrapper table {
  border: 1px solid rgb(var(--v-border-color), var(--v-border-opacity));
}

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

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

.v-table thead tr th, .v-table-header-wrapper thead tr th {
  border-bottom: 1px solid rgb(var(--v-border-color), var(--v-border-opacity));
}
</style>

核心说明 #

1. 新增.v-table-header-wrapper table选择器，覆盖克隆表头容器的样式，补上缺失的上边框；
2. 同步表头单元格的左侧边框规则到克隆表头，保证整体网格线一致；
3. 保留使用Vuetify内置CSS变量，确保样式与主题系统统一，不会出现配色冲突；
4. 可选的表头底部边框能提升表格的视觉层次感，可根据需求调整。

内容的提问来源于stack exchange，提问作者baitendbidz