Discussion on: Why it's time to embrace position sticky

View post

Replies for: Except it doesn't work well in table headers. I mean check this example: charliepark.org/css-only-sticky-he... It works for me only in Firefox Mob...

It seems to work ok for me.

EDIT:

Just looked at the page you linked their elements table is wrong, they need to put sticky on the th not the thead.

Adding this CSS would fix their problem.

#example_sticky_header_container thead th  {
  position: sticky;
  top: 0;
}

jkane50 • Apr 23 '20 • Edited

The above css could cause a problem if there was more than one header row. Since top:0 is there it should only be applied to the 1st header row.
thead tr:first-child th {
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: #2eA0ff;

}
Also need webkit for safari.
For multiple header rows you need nth child css or a little javascript where you sum the height of the previous rows.