How to freeze the first row in Jotform's Input Table?

I have created a survey table using Jotform, but as you can see, there are so many rows that scrolling down makes the row headers invisible, causing inconvenience in responding.

How can I insert a code to freeze the first row like in Excel? I have also attached the link to my survey form.

Thank you so much in advance!

Hi youngminyoo3,

Thanks for reaching out to Jotform Support. Yes, it is possible to freeze the first row of the Input Table. I have created a clone where you can check it, you can scroll up and down and the titles will remain. You can clone it following this guide. If you'd like to change it in your form, I would suggest adding the following CSS Codes in each Input table.

For the headers and to freeze the 1st column, apply the following custom CSS Codes:

div#cid_15{

 position: relative;

 height: 400px;

 overflow: auto;

}

div#cid_15 tr.form-matrix-tr.form-matrix-header-tr > th {

 position: sticky;

 top: 0;

 z-index: 10;

}

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

 position: sticky;

 left: 0;

 z-index: 10;

}

Adjust the 400px to your preferred height. The field IDs can be used to style your forms using CSS codes, you can check more in this guide how to inject it.

Give it a try and let us know if you have any other questions.

Hi Esther, thank you for your assistance with the CSS code for freezing the row headers in my JotForm tables. However, I've encountered an issue where the code does not seem to be working. I suspect that the issue might be related to the cid numbers used in the code. (I guess I have to change 'cid_15' to another number for each table..) As you can see in my survey, there are three tables, and I am looking to freeze the row headers for each of these tables.

Unfortunately, I am not sure how to find the correct cid numbers for these tables. Could you please guide me on how to find these numbers within JotForm?

Thank you once again for your time and assistance.

Hi youngminyoo3,

Thank you for getting back to us. To freeze the row header of the input table, you will need to inject custom CSS codes into your form. Instead of cid_15, change it to cid_5 and it should work as expected. Please use div#cid_30 and div#cid_36 for the second and third tables. I'll show you how it is done:

• Click on the Paint Roller icon to open the Form Designer.
• Click on the Styles tab and scroll down to Inject Custom CSS.
• Copy and paste the following codes.

/*Freeze the row headers of input table - 10830661*/

div#cid_5{

 position: relative;

 height: 400px;

 overflow: auto;

}

div#cid_5 tr.form-matrix-tr.form-matrix-header-tr > th {

 position: sticky;

 top: 0;

 z-index: 10;

}

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

 position: sticky;

 left: 0;

 z-index: 10;

}





div#cid_30{

 position: relative;

 height: 400px;

 overflow: auto;

}

div#cid_30 tr.form-matrix-tr.form-matrix-header-tr > th {

 position: sticky;

 top: 0;

 z-index: 10;

}

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

 position: sticky;

 left: 0;

 z-index: 10;

}





div#cid_36{

 position: relative;

 height: 400px;

 overflow: auto;

}

div#cid_36 tr.form-matrix-tr.form-matrix-header-tr > th {

 position: sticky;

 top: 0;

 z-index: 10;

}

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

 position: sticky;

 left: 0;

 z-index: 10;

}

/ends here/

Check out the screencast below to see my results:

The codes will also work for columns in mobile view. Here's how it should be after my test.

Reach out again if there's anything else we can do for you.