在 vuetify 3 中为表格添加自定义网格线时，启用 `fixed-header` 后滚动会导致表头（`
`）丢失 `border-top`；本文提供精准 css 修复方案，确保表头边框始终可见且不破坏整体布局。
vuetify 3 官方尚未原生支持表格网格线（见 issue #16336），因此开发者常通过自定义 css 添加边框模拟网格效果。但当使用 并配合 height 属性实现滚动时，一个常见陷阱浮现：固定表头在滚动后顶部边框消失。
根本原因在于：Vuetify 将 thead 提升为独立的固定层（通过 position: sticky 或内部滚动容器隔离），导致原本作用于
元素的 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)); }
- 抵消
的冗余 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，保持视觉对齐 */ }
? 完整推荐样式（含列分隔线）：
立即学习“前端免费学习笔记（深入）”；
⚠️ 注意事项：
- 不要仅依赖 table thead { border-top: … } —— Vuetify 的固定表头机制可能使该选择器失效；
- margin-top: -1px 是安全的，因 Vuetify 表格内部结构已预留足够空间，不会引发内容遮挡；
- 若使用深色主题或自定义变量，请确保 –v-border-color 和 –v-border-opacity 已正确定义（Vuetify 3 默认提供）；
- 此方案兼容响应式布局，无需额外媒体查询。
通过以上调整，无论是否滚动、是否启用 fixed-header，表头顶部边框均稳定显示，网格线风格统一、专业，且完全遵循 Vuetify 3 的设计系统规范。
|