Freeze the position of row and column headers of Input Table

  • rickpijpker
    Gevraagd op 14 mei 2024 om 10:27

    Ik heb in een formulier een tabel toegevoegd met veel kolommen en rijen. Is het mogelijk om de titel kolommen vast te zetten als degene die het invult naar onder en/of naar rechts scrollt zodat hij de gehele tabel in kan vullen met de titelkolommen aan de linkerkant voor de rijen en de bovenkant voor de kolommen? Zo niet, is het mogelijk om elke rij in de tabel een kleurtje te geven? Of zijn er misschien andere opmaak opties die hierbij kunnen ondersteunen? Zie de afbeelding hoe het er nu uit komt in de mobiele versie als je ergens in het midden van de tabel iets invult.

  • Christopher Jotform Support
    Geantwoord op 14 mei 2024 om 12:40

    Hi rickpijpker,

    Thanks for reaching out to Jotform Support. Unfortunately, our Dutch Support agents are busy helping other Jotform users at the moment. I'll try to help you in English using Google Translate, but you can reply in whichever language you feel comfortable using. Or, if you'd rather have support in Dutch, let us know and we can have them do that. But, keep in mind that you'd have to wait until they're available again.

    Now, coming back to your question, please inject the provided CSS code.

    /*Set height of Input Table - 14854031*/
    div#cid_3, div#cid_4, div#cid_5 {
    position: relative;
    height: 300px;
    overflow: auto;
    }
    /*Code ends here*/

    /*Freeze table column headers position - 14854031*/
    tr.form-matrix-tr.form-matrix-header-tr > th {
    position: sticky;
    top: 0;
    z-index: 10;
    }
    /*Code ends here*/

    /*Freeze table row headers position - 14854031*/
    th.form-matrix-headers.form-matrix-row-headers {
    position: sticky;
    left: 0;
    z-index: 10;
    }
    /*Code ends here*/

    Here's how to do it:

    1. In Form Builder, on the right side of the screen, click on the Paint Roller icon.

    2. On the right panel, go to Styles.

    3. Scroll down to Inject Custom CSS.

    4. Paste the provided CSS code.

    Freeze the position of row and column headers of Input Table Image 1 Screenshot 30

    Result:

    Freeze the position of row and column headers of Input Table Image 2 Screenshot 41

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

  • Rick
    Geantwoord op 15 mei 2024 om 03:42

    Absolutely perfect! Thank you for the fast reply!