I want to freeze the left column of table , so I set the position to sticky.
But it didn't work !
Is there any way to do it?
The table is constructed in rows not columns, so this is not possible to do with just css.
all you can do is constructing your own table like this
2 Likes
Yes it is possible it doesn't work immediately because you need the inset properties and you need it to attach to the correct parent.
Here is how you do it:
- Set position: sticky;
- Set atleast one of the inset properties: i.e (left:0; since we want it on the left)
- Ensure it attaches to correct ancestor by checking there are no hidden scrolling areas between the ancestor of choice and the sticky component (See attached https://polypane.app/blog/getting-stuck-all-the-ways-position-sticky-can-fail/). Hence I changed the overflow from hidden to clip within style.css (from what I understand there are the same hidden just allows some sort of programatic scrolling)
- Set the z-index to a positive non zero value.
- Redraw background
Do this in the column you want:
Do this in stylesheet.css and change the id to the field name of the column
Heres is a screen recording of it in action
