在 vuetify 3 中为表格添加自定义网格线时，启用 `fixed-header` 后滚动会导致表头（`
Vuetify 3 官方尚未原生支持表格网格线（见 issue #16336），因此开发者常通过自定义 CSS 添加边框模拟网格效果。但当使用 <v-table fixed-header> 并配合 height 属性实现滚动时，一个常见陷阱浮现：固定表头在滚动后顶部边框消失。
根本原因在于：Vuetify 将 thead 提升为独立的固定层（通过 position: sticky 或内部滚动容器隔离），导致原本作用于 <table> 元素的 border-top 不再渲染在 thead 上；而 th 默认未设置 border-top，因此视觉上“丢失”了顶边。
✅ 正确解法分两步，缺一不可：
-
显式为 th 添加 border-top
确保每个表头单元格自身携带顶部边框，不受父容器 border 影响：
table th {
border-top: 1px solid rgb(var(--v-border-color), var(--v-border-opacity));
}-
抵消 <table> 的冗余 border-top，避免边框加粗
若同时保留 table { border: 1px ... }，则 table 的 border-top 与 th 的 border-top 会叠加，造成 2px 粗边。应移除 table 的 border-top，并用负外边距补偿高度偏移：
table {
border: 1px solid rgb(var(--v-border-color), var(--v-border-opacity));
border-top: none; /* 关键：禁用 table 自身的顶边 */
margin-top: -1px; /* 关键：向上微调 1px，保持视觉对齐 */
}? 完整推荐样式（含列分隔线）：
立即学习“前端免费学习笔记（深入）”；
<style>
/* 基础表格边框（不含顶边） */
table {
border: 1px solid rgb(var(--v-border-color), var(--v-border-opacity));
border-top: none;
margin-top: -1px;
}
/* 表头顶部边框（确保固定时可见） */
table th {
border-top: 1px solid rgb(var(--v-border-color), var(--v-border-opacity));
}
/* 列间竖线 */
table th + th,
table td + td {
border-left: 1px solid rgb(var(--v-border-color), var(--v-border-opacity));
}
</style>⚠️ 注意事项：
- 不要仅依赖 table thead { border-top: ... } —— Vuetify 的固定表头机制可能使该选择器失效；
- margin-top: -1px 是安全的，因 Vuetify 表格内部结构已预留足够空间，不会引发内容遮挡；
- 若使用深色主题或自定义变量，请确保 --v-border-color 和 --v-border-opacity 已正确定义（Vuetify 3 默认提供）；
- 此方案兼容响应式布局，无需额外媒体查询。
通过以上调整，无论是否滚动、是否启用 fixed-header，表头顶部边框均稳定显示，网格线风格统一、专业，且完全遵循 Vuetify 3 的设计系统规范。
