滚动div高度后CSS粘性标题消失

Question

编辑:问题已修复。不幸的是，我在这里发布的代码中没有任何内容，因此发布答案不会有太大好处。这是一个框架问题。

正如标题所暗示的那样，我有一个带有粘性的 div(带表格)<thead>通过使用 position: sticky;在我的 CSS 中。但是在滚动 div 高度后，标题只是随着内容向上滚动。

html代码是这样的

<div class="tablewrapper">
    <table>
        <thead>content with tr and th's</thead>
        <tbody>more content with tr and td's</tbody>
    </table>
</div>

我的 CSS 代码是这样的:

.tablewrapper {
    overflow: auto;
}

.tablewrapper table {
    /* This is empty */
}

.tablewrapper thead {
    display: block;
    position: sticky;
    overflow: visible
}

.tablewrapper tbody {
    overflow: visible;
    display: block;
}

滚动条来自 .tablewrapper .

我该如何制作 thead保持粘性？

另外，澄清一下，代码比这里先进得多，所以不幸的是我被迫在 tablewrapper 上设置滚动条。 .

纯 CSS 修复会更可取

Answer 1

添加 Top: 0;当它到达顶部时，thead 标签会粘住

.tablewrapper thead {
  display: block;
  position: sticky;
  Top:0;
  overflow: visible
}