如何解决溢出表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 举报,一经查实,本站将立刻删除。