Question

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

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

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

使用此单元格不会冻结并且会随着整个表格从左向右移动。我找到了这个 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>

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

1 个答案: