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

Question

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

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

这是不工作示例的代码笔： 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

根据the MDN documentation：

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

有an active GitHub issue discussing this on the W3C repo，它自 2017 年以来一直在运行。提出了各种解决方法，但它们似乎都依赖于向表格/表格容器添加固定高度，或 using Javascript as in this answer。

至少目前，这不是本机支持的。