我想创建带有粘性标题的显示弹性表。 我不知道为什么,但是当我将表结构的显示设置为flexbox时,我的表便失去了它的位置:粘性。
我的代码(scss):
.talbe-container{
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
overflow-y: auto;
.table{
width: 100%;
display: flex;
flex-flow: column nowrap;
flex: 1 1 auto;
thead{
tr{
display: flex;
flex-flow: row nowrap;
align-self: flex-start;
th{
top: 0;
position: sticky;
display: flex;
flex-flow: row nowrap;
flex-grow: 1;
flex-basis: 0;
white-space: nowrap;
z-index: 100;
}
}
}
tbody{
tr{
display: flex;
flex-flow: row nowrap;
td{
display: flex;
flex-flow: row nowrap;
flex-grow: 1;
flex-basis: 0;
height: .20rem;
white-space: nowrap;
overflow: hidden;
font-size: .14rem;
}
}
}
}
}
html代码是容器div中的一个简单表。
关于使用flexbox时没有粘性标头的Gif:
感谢您的时间,帮助和事先答复:)
----#Edit1 我的问题是关于为什么显示:flexbox和position:sticky不能一起工作,而不是关于如何在纯CSS中制作固定的标头表。