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

Question

我正在尝试创建带有粘性标题的表（不使用position: sticky。该表还具有溢出滚动条，但这会导致我现在使用的CSS出现多个问题。我在这里有一个工作示例： https://codesandbox.io/s/vue-template-1ge8v（html和CSS在App.vue中定义）。

当前CSS存在的问题是：

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

我尝试了overflow，position ing等类似的多种变体，但无法弄清楚当前CSS到底出了什么问题。

Answer 1

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