在 vuetify 3 中为表格添加自定义网格线时，启用 `fixed-header` 后滚动会导致表头（`
`）丢失 `border-top`；本文提供精准 css 修复方案，确保表头边框始终可见且不破坏整体布局。 Vuetify 3 官方尚未原生支持表格网格线（见 issue #16336），因此开发者常通过自定义 CSS 添加边框模拟网格效果。但当使用 并配合 height 属性实现滚动时，一个常见陷阱浮现：固定表头在滚动后顶部边框消失。
根本原因在于：Vuetify 将 thead 提升为独立的固定层（通过 position: sticky 或内部滚动容器隔离），导致原本作用于
元素的 border-top 不再渲染在 thead 上；而 th 默认未设置 border-top，因此视觉上“丢失”了顶边。✅ 正确解法分两步，缺一不可：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
-
显式为 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，保持视觉对齐 */
}
? 完整推荐样式（含列分隔线）：
<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 的设计系统规范。
| 前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
