用表头粘住表体并水平滚动表体

Question

在下面的demo中，我有一个需要特定滚动行为的表格。挑战在于保持表头粘在顶部，同时允许表体与表头平行地水平滚动。

一个重要的方面是，应用于标题元素的

position: sticky

属性不需要其父元素具有

overflow

属性。

我已经尝试使用 JavaScript 来实现某种同步滚动来解决这个问题，这很有效。但是，这种方法有一个明显的缺点：它断开了标题和正文中单元格的对齐方式，从而导致意外的表格布局。

有人遇到过这个问题或知道如何解决吗？ 我将不胜感激任何建议。