CSS置顶标题滚动DIV高度后消失

问题描述 投票:1回答:1

编辑:该问题已得到修复。不幸的是它是不是在我这里张贴张贴这样的答案不会做太多的好东西代码。这是一个框架的问题。

正如标题所暗示的,我在我的CSS使用<thead>有一个div(与表),带有粘性position: sticky;。但滚动的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修复将是优选

css scroll sticky
1个回答
0
投票

添加Top: 0;的THEAD标签将贴何时会达到顶峰

.tablewrapper thead {
  display: block;
  position: sticky;
  Top:0;
  overflow: visible
}
© www.soinside.com 2019 - 2024. All rights reserved.