具有滚动和绝对位置的 CSS 粘性表格标题

Question

我正在尝试创建一个带有粘性标题的表格（不使用position: sticky。该表格也有溢出滚动条，但这会导致我现在拥有的 CSS 出现多个问题。我在这里有一个工作示例：@987654321 @（html和css定义在App.vue）。

我对当前 CSS 的问题是：

1. 水平滚动时，标题行的底部边框在中途停止。
2. 水平滚动，Heading 没有粘性（它应该始终保持在同一位置。（参见 3。）
3. 水平和垂直滚动时，列标题不会随当前视口滚动。 Heading 仍然保持粘性，这是正确的行为。

我尝试了overflow、positioning 等的多种变体，但无法弄清楚我当前的 CSS 有什么问题。

Answer 1

第一个问题正在发生，因为第 31 行 App.vue 文件中隐藏了可见性。