溢出表x div内的粘性表格标题，宽度为100％

问题描述

我只是无法在overflow-x：自动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内，但滚动时通过表格的标题时顶部没有固定的标题！

表本身正在使用Bootstrap的“表”类。

必须有一种方法来完成此操作，似乎每当我添加overflow-x来照顾表格的水平溢出时，表格标题的粘性就会消失。

sticky标头类仅在thead中起作用，并且一旦滚动通过表，标头就固定在页面顶部。

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

为什么当我在包含带有粘性表格标题的表格的div中添加“ overflow-x：auto”样式时，它会使标题变得不粘性吗？

我该怎么做？

编辑：这是Fiddle。

当前，overflow-x处理表的溢出，将其隐藏在容器的宽度（100％）之后，但是如果滚动通过标题，则什么也不会发生。注释掉d1类的第37行overflow-x: auto;，一旦向下滚动页面，就可以实现所需的粘性标头，但是现在表格扩展了容器的宽度。

我怎么都可以？隐藏表格的上溢，但向下滚动页面后标题仍会粘在页面顶部吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

css-position css-tables html html-table