html - 带有粘性标题的高级 HTML CSS flexbox 表

Question

我想创建一个带有粘性标题的显示弹性表。我不知道为什么，但是当我将表格结构的显示设置为 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 我的问题是关于为什么 display: flexbox 和 position:sticky 不能一起工作，而不是关于如何在纯 css 中制作固定的标题表。

标签： htmlcsssassflexboxsticky