带有标头的高级HTML CSS flexbox表

时间:2018-10-29 13:24:46

标签: html css sass flexbox sticky

我想创建带有粘性标题的显示弹性表。 我不知道为什么,但是当我将表结构的显示设置为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:

enter image description here

感谢您的时间,帮助和事先答复:)

----#Edit1 我的问题是关于为什么显示:flexbox和position:sticky不能一起工作,而不是关于如何在纯CSS中制作固定的标头表。

0 个答案:

没有答案