gpt4 book ai didi

html - 粘性位置会杀死 chrome 77 (osx) 中的滚动条

转载 作者:行者123 更新时间:2023-11-28 19:15:31 26 4
gpt4 key购买 nike

在下面的示例中,我有两个表,除了第一个表有一个粘性标题,我用它实现

  position: sticky;
top: 0px;

https://codepen.io/seunje/pen/JjjRVLm

粘性效果很好,但滚动条消失了!这在 Firefox 中运行良好。

有人知道 Chrome 中的解决方法吗?

.container {
height: 50px;
overflow: auto;
}
.table {
display: table;
width: 100%;
}
.tr.sticky-header {
position: sticky;
top: 0px;
}
.td.sticky-header {
position: sticky;
top: 0px;
}
.tr {
display: table-row;
}
.td {
display: table-cell;
}
<div class="container">
<div class="table">
<div class="tr sticky-header">
<div class="td sticky-header">H1</div>
<div class="td sticky-header">H2</div>
<div class="td sticky-header">H3</div>
<div class="td sticky-header">H4</div>
<div class="td sticky-header">H5</div>
</div>
<div class="tr">
<div class="td">1</div>
<div class="td">2</div>
<div class="td">3</div>
<div class="td">4</div>
<div class="td">5</div>
</div>
<div class="tr">
<div class="td">1</div>
<div class="td">2</div>
<div class="td">3</div>
<div class="td">4</div>
<div class="td">5</div>
</div>
<div class="tr">
<div class="td">1</div>
<div class="td">2</div>
<div class="td">3</div>
<div class="td">4</div>
<div class="td">5</div>
</div>
</div>
</div>
<div class="container">
<div class="table">
<div class="tr header">
<div class="td header">H1</div>
<div class="td header">H2</div>
<div class="td header">H3</div>
<div class="td header">H4</div>
<div class="td header">H5</div>
</div>
<div class="tr">
<div class="td">1</div>
<div class="td">2</div>
<div class="td">3</div>
<div class="td">4</div>
<div class="td">5</div>
</div>
<div class="tr">
<div class="td">1</div>
<div class="td">2</div>
<div class="td">3</div>
<div class="td">4</div>
<div class="td">5</div>
</div>
<div class="tr">
<div class="td">1</div>
<div class="td">2</div>
<div class="td">3</div>
<div class="td">4</div>
<div class="td">5</div>
</div>
</div>
</div>

最佳答案

您可以将背景应用到标题并为其赋予更高的 z-index,这样您就可以始终将标题放在证据中

关于html - 粘性位置会杀死 chrome 77 (osx) 中的滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58453628/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com