I tried those mods but what I end up with isa a table header row that disappears or migrates down the page.
Here what my table display looks like at start
Looks like you have the app set to “Max Width” in the settings. The code only seems to work if you have it set to “Full Width”. There could be some other conflict with the CSS given the customisation you have.
Yes I played with max width/full width and that seems to be the case.
Unfortunately the look with full width is desirable for our setup.
Will have to put in a bug report I guess.
Find it bit strange that such a standard feature of “tables” across modern computing even has an issue
We’re like you and prefer Max Width and had the same result using Carl’s code.
We’re currently using the following code which is functional but not visually perfect during scrolling until someone more knowledgeable posts a better solution.
Like minds I found this same reference to the issue being a javascript issue in the stackoverflow forums and with that same solution.
What I WAS also experiencing also is that if a table field is coloured based on a value (i.e GOOD = green background or BAD - red background) the table field title disappears completely.
Same thing applies of the table field is a URL embedded reference.
The solution your offer does do the job of overlaying the info in the table on partially displayed rows and retains the heading title.
I’ve opted to offset by -10px. That places it back where it should be although the small price to pay is a thin gap at the top when first displaying the table. Can live with that for a much more desirable and workable outcome.
Cheers for following through mate - much appreciated
PS Have you changed the color of the background of the header row at all ?
Not managed to find where to put the paramter to get it done successfully.
Followed all the notes metods I could find
It looks like it requires a combination of CSS and Javascript to achieve a true sticky header rather than the band-aid solution we’re both now using. Unfortunately, I don’t have time at present to solve this minor irritation.
Hi Carl. I created a new post showing how one can freeze columns. I don’t know much about CSS coding, I managed to do it with the help of ChatGPT. If you have the time, please take a look at it.
Thanks! This was exactly what I needed! I was hoping to put sticky headers on most, if not all our pages. I can’t seem to add another view successfully to the code, though. Can you please let us know:
Is there a way to add sticky headers on all the pages?
How do you edit the code to add sticky headers to additional pages?
As you may be aware, I’m not a coder. I’m sorry, but I don’t know if it’s possible to have a global snippet to add sticky headers to every table.
That being said, I don’t think I’d want to do that across a whole application personally. Especially as you can vary the view port (height) of each table with the max-height pixel variable.
As I mention in the code example, just repeat for each view that you want to add sticky headers, as per the below example.
I’ve been using this code for several years with no issues. Almost every client app has a number of views with sticky headers. If you’re finding that it’s not working on multiple views then you may have some other code that is conflicting with it