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）不支持此功能，但作为渐进增强，它运行良好，因为不受支持的浏览器不会获得粘性标题效果。