粘性列标题不会保持固定

Question

我试图将表格中的第一列完全固定在移动设备上，因此当用户尝试滚动数据时，他们能够看到他们正在查看的确切对象。到目前为止，表格的 td 元素是完美的，并且可以按照我想要的方式做出反应，但是列标题仍在滚动并且没有停留在其真实位置。

滚动前的表格：

滚动后的表格：

这是控制宽度小于 600 像素的设备的 CSS：

@media (max-width: 600px) {

    th {
        overflow: auto;
    }


    .first {
        position: fixed;
        width: 90px;
        z-index: 2;
    }

    .firsth {
        position: sticky;
        width: 90px;
        z-index: 2;
    }

}

codepen 有点奇怪，因为它不包含原始样式，但尽管如此，我还是提供了它以使任务更容易理解。

Codepen

Answer 1

.firsth {
    position: sticky;
    width: 90px;
    z-index: 2;
    top:90px;
    }

除非您指定要粘贴的位置，否则粘性不会起作用，您需要像 top:90 一样指定它；这应该可行。