How to Freeze Input Tables Header?

Hello, a question please… I found a solution (from 2024) for how to freeze the first column of an input table. However, the CSS code isn’t working for my table (the “0” and the “12” are highlighted in red when I enter the suggested code). These are the steps suggested by JF support:

“Freezing the first column can be achieved by adding a CSS. Let me show you how it's done: Open your form in Form Builder and click on the blue Paint Roller icon on the right side of the screen. Under the Styles tab, paste the code below into the Inject Custom CSS area.

/* Freeze first column – 10573621 */

div #cid_3 th.form-matrix-row-headers {

position: sticky;

left: 0;

z-index: 12; by} /* Ends here */

Is there a general code fix for this, I imagine you need the link to the table I’m trying to edit? Thx! Syma

Hi Syma,

Thanks for reaching out to Jotform Support. The CSS code you found uses #cid_3, which is the ID of a specific field or input table in that particular form. That ID is different for every form, so if you copy that exact code into a different form, it often won't work unless your table also happens to have the ID cid_3.

Coming back to your concern, it appears you are referring to your DAILY ROUTINE CHECKLIST form. I’ll need a bit of time to look into this. I’ll get back to you as soon as I can.

Let us know if you have any other questions.

Hi Syma,

Are you referring to your DAILY ROUTINE CHECKLIST form? If so, you can add custom CSS codes to freeze the input table column header. Let me show you how:

1. First, copy this code:

/* Scrollable container */

#cid_19 {

  position: relative;

  overflow: auto;

  height: 400px; /*adjust the height depending on the number of your table rows*/

}



/* Apply sticky positioning to each header cell */

#cid_19 > table > tbody > tr.form-matrix-tr.form-matrix-header-tr > th,

#cid_19 > table > tbody > tr.form-matrix-tr.form-matrix-header-tr > td {

  position: sticky;

  top: 0;

  z-index: 10;

}

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

Here's my sample result with the cloned version of your form:

If you are targeting a specific input table in your form, give us more details so we can help you with it.

Give it a try and let us know how it goes.

Thanks so much!

I'd like ALL the input tables in my form to have this feature, in case I add days of the week, or longer column names, please. Where do I find the ID information in my forms, so I can learn to do it myself from now on (I know this is a feature I will repeat in all of my future input tables).

So the following input tables:

1. SLEEP-MOVE-MOOD TRACKING: RATE 1-10 (1=WORST 10=BEST)
2. MED TRACKING: Choose YES/NO (.2gm Mushroom + .1gm Lions Mane)
3. MEDICATION [WRITTEN] FEEDBACK (If any?):
4. YOUR WONDERFUL DAY (Check Boxes for YES):
5. DRINKS: (Choose QUANTITY from Dropdown):
6. FOR YOUR SOUL (Check Box for a ‘YES’):
7. PEACEFUL WIND DOWN (Check Box for a YES):

I SO appreciate this help!

Thanks!

Syma