具有粘性标题和水平滚动的表格

Question

我想要一个带有粘性标题和水平滚动的表格。

我不想在表格内有垂直滚动。它应该随页面滚动。所以桌子的高度没有设定。这可能吗？

这是不工作示例的 codepen： https ://codepen.io/fwitkowski/pen/zYEQvvg

当我从表容器中删除溢出：自动时，位置粘性工作得很好。

.table-container {
  max-width:350px;
  overflow-x:auto; /* for horizontal scroll */
  position: relative; /* relative to the normal flow */
  border: solid 5px red /* for reference */
}

Answer 1

根据MDN 文档：

粘性元素“粘”到其最近的具有“滚动机制”的祖先（在overflow、hidden、scroll或auto时创建overlay），即使该祖先不是最近的实际滚动祖先。

W3C 存储库上有一个活跃的 GitHub 问题正在讨论此问题，该存储库自 2017 年以来一直在运行。已经提出了各种解决方法，但它们似乎都依赖于向表/表容器添加固定高度，或者使用 Javascript，如下所示回答。

至少目前，这不是原生支持的。