Elm中带有固定标题的表 - 如何在水平和垂直方向上同步标题

Question

我有一张表，我事先并不知道列数和行数。我需要：

• 固定标题
• 横向滚动
• 垂直滚动

我遇到的主要问题是表头没有水平同步移动。在JavaScript中，我可以这样做，例如在How to make fixed table header scroll horizontally in sync with tbody data?中。 我怎样才能让它在Elm中运作？

我还有其他一些问题：

• 标题单元格与主体单元格的宽度不同。
• 在这个示例https://ellie-app.com/hS8kFyKRza1/0中，我只希望显示前3列，其余部分在水平滚动时显示，并且表格在双向滚动时与标题同步移动。

如果我离不开JavaScript，我会很感激我应该如何设置端口以及JS代码应该是什么。

Answer 1

如果您的浏览器支持要求允许，我们执行此操作的方式是在标题行中的th元素上使用CSS position: sticky。较旧的浏览器（包括IE 11）不支持此功能，但作为渐进式增强功能，它运行良好，因为不受支持的浏览器不会获得粘性标题效果。