Html 100%宽度的溢出x div内的粘性表格标题

我就是无法在overflow-x:auto-div中获得一个粘性的表头

目标是使一个包含许多列的表包含在div（100%div）中，并且能够水平滚动溢出，当垂直滚动时，表的标题固定在页面顶部

<div style=“overflow-x: auto”>
    <table class=“table”>
        <thead class=“sticky”>
            <tr>
                <td>Col 1</td>
                <td>Col 2</td>
                ...
            </tr>
         </thead>
    </table>
</div>

为什么我在包含具有粘性表格标题的表格的div中添加'overflow-x:auto'样式时，会使标题不粘性

我怎样才能做到这一点

编辑：这里有一个例子

目前，overflow-x处理表的溢出，将其隐藏在容器宽度（100%）之后，但是如果滚动通过标题，则不会发生任何事情。注释第37行，

overflow-x:auto

在d1类上，您可以在向下滚动页面时获得所需的粘性标题，但现在表扩展到容器的宽度

---

我怎么能两者兼得呢？隐藏表的溢出，但在向下滚动页面时，仍将标题粘贴到页面顶部？

您的意思是

位置：粘贴<代码>固定

还有另一个用途。这里有一个有效的例子：对不起，是的，我的意思是粘性。我是在电话上写的，所以很痛苦，我在想“固定”标题，但我的类确实反映了粘性。@G-Cyrillus，我用小提琴编辑了这篇文章，以你的工作示例为例，对其进行了一些修改，以帮助澄清我试图实现的目标：。你能帮忙吗？谢谢大家!

.d1{max height:100%；}

要求计算其父级上的高度，否则为null的100%。试试100vh或100px，看看它是否正常工作。还可以在主体上设置高度，然后使用引导类：

sticky tr > th {
    position: sticky;
    top: 0;
}