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
6 Likes
hm oke this kinda works but having to use z-index will make it break on certain settups (like popups)
overflow clip is interesting though, i have never used it
3 Likes
Hmm actually good point about the z-index I'll keep a eye on it and see if it causes any issues. I didn't see any issues as of yet with our popups so I assume it is localized.
z-index are not localised (thats the whole point of it).
I remember perspective used zindexes somewhere for sure.
Anyways aslong it works its fine 
2 Likes
2 Likes
Great! will try! Freeze column is much needed for large tables.