1

I want to create a display flex table with sticky headers. I don't know why but my table loses it's position:sticky nature when I set displays of the table structure to flexbox.

My code (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;
                }
              }
            }
          }
}

The html code is a simple table in a container div.

Gif about the no sticky headers when using flexbox:

enter image description here

Thanks for your time, help and answers in advance :)

----#Edit1 My question is about why display: flexbox and position: sticky does not work together and not about how to make fixed header table in pure css.

Bálint Réthy
  • 411
  • 1
  • 6
  • 25
  • ^^ which then has an answer here : https://stackoverflow.com/a/52444572/4244684 – Stender Oct 29 '18 at 13:31
  • Don't think so.. I want to use flexbox and sticky headers without fixing the height of the parent container or the with of the columns. – Bálint Réthy Oct 29 '18 at 13:33
  • well - There are about 13 different answers in there - So one should work – Stender Oct 29 '18 at 13:39
  • this looks like tabular data so why not just use a table with sticky headers rather than trying to re-invent the wheel with something that is not semantically correct – Pete Oct 29 '18 at 13:45
  • I need flexbox because I want to get a responsive result where I can resize the columns with user interactions in the future. – Bálint Réthy Oct 29 '18 at 13:47
  • Well I have seen this already: https://stackoverflow.com/questions/53046464/advanced-html-css-flexbox-table-with-sticky-headers?noredirect=1#53046821 so I added align-self: flex-start to every possibility and it did not solve my problem :S – Bálint Réthy Oct 29 '18 at 13:58
  • 1
    here you will find a working one. https://jsfiddle.net/vssadineni_at_kavayah/5zok0a1d/2/#&togetherjs=b48i3gLqOw – vssadineni Oct 29 '18 at 14:48
  • Good job on this vssadineni. It helped a lot and this is a perfect solution of this problem. Is this working because you applied sticky on thead instead of th tag? – Bálint Réthy Oct 29 '18 at 15:16

0 Answers0