table 中的位置粘性不适用于水平滚动

Question

我正在尝试制作 table 可以冻结列的水平滚动，现在我正在尝试冻结一个单元格以进行测试，但它不会按预期工作。

这是我用来冻结单元格的代码：

element.style {
    position: sticky !important;
    z-index: 1000;
    top: 0;
}

使用此单元格不会冻结，并且整个 table 从左到右移动。我找到了这个 https://plnkr.co/edit/l0m9pF3His2BrKjS?preview 并尝试在我的项目中重新创建该解决方案。

有人知道我无法将此单元格冻结到位的原因吗？

如果我使用垂直滚动，单元格将停留在其他元素之上，因此 z-index: 部分有效。

Answer 1

你必须定义left或right才能使它在水平方向也有粘性。

工作示例：

* {
    margin: 0;
    padding: 0;
}

div {
    width: 200vw;
    height: 100vh;
}

span {
    position: sticky !important;
    z-index: 1000;
    top: 0;
    left: 0;
}

<div>
    <span>STICKY SPAN</span>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>

table 中的位置粘性不适用于水平滚动

Position sticky is not working with horizontal scroll in table

html

css

frontend

html-table