修复了 Vuetify 表的标题在滚动时丢失边框顶部 CSS答案

【问题标题】：Fixed header of Vuetify table looses border-top CSS on scroll修复了 Vuetify 表的标题在滚动时丢失边框顶部 CSS
【发布时间】：2023-02-01 18:35:06
【问题描述】：

目前不支持 Vuetify 3 表格的网格线 (https://github.com/vuetifyjs/vuetify/issues/16336)

所以我用自定义 CSS (reproduction link) 添加了它们

<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 不完整吗？

【问题讨论】：

标签： html css vuetify.js vuetifyjs3

【解决方案1】：

您可以通过向 CSS 代码中的 thead 元素添加 border-top 属性来解决此问题。下面是更新后的 CSS 代码的示例：

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

thead {
  border-top: 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));
}

这将为标题行添加一个顶部边框，即使它滚出屏幕，确保网格线始终可见。

【讨论】：