table 具有粘性 header 和水平滚动

Question

我想要一个带有粘性 header 和水平滚动的 table。

我不想要 table 中的垂直滚动条。它应该随页面滚动。所以没有设置高度了table。这可能吗？

这是无效示例的代码笔： https://codepen.io/fwitkowski/pen/zYEQvvg

当我从 table-container 中删除 overflow: auto 时，位置粘性工作正常。

.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：

a sticky element "sticks" to its nearest ancestor that has a "scrolling mechanism" (created when overflow is hidden, scroll, auto, or overlay), even if that ancestor isn't the nearest actually scrolling ancestor.

有 an active GitHub issue discussing this on the W3C repo, which has been running since 2017. There have been various workarounds suggested, but they all seem to rely on adding a fixed height to the table / table container, or using Javascript as in this answer.

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

table 具有粘性 header 和水平滚动

table with sticky header and horizontal scroll

html

css

html-table

sticky