How can I make a clear differentiation in fields on an input table?

  • Aquatics_Bahamas
    Asked on November 20, 2023 at 10:29 AM

    How can I make a clear differentiation in fields on an input table? Image 1 Screenshot 20

    I'd like the user to clearly see the difference between Male and Female and rooms 1, 2, 3, etc.

    It there anyway to highlight fields or change font color or style?








  • KrisLei Jotform Support
    Replied on November 20, 2023 at 1:27 PM

    Hello Bahamas Aquatics,

    Thank you for reaching out to us. You can change the color of a certain column or highlight it using custom CSS codes. Let me walk you through it:

    1. Copy the code below:

    /*changing the background color of the 'Female' column in Input Table*/
    #id_21 .form-matrix-headers.form-matrix-column-headers.form-matrix-column_0 {
        background-color : #dfb0d3;
        border-color: white;
    }

    #id_21 .form-matrix-values:nth-child(2) {
        background : #dfb0d3!important;
       border-color: white;
    }

    /*changing the background color of the 'Male' column in Input Table*/
    #id_21 .form-matrix-headers.form-matrix-column-headers.form-matrix-column_3 {
        background-color : #ADD8E6;
      border-color: white;
    }

    #id_21 .form-matrix-values:nth-child(5) {
        background : #ADD8E6 !important;
       border-color: white;
    }

    #id_21 .form-textbox {
       background-color: white!important;
    }

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

    3. In the Form Designer menu, click on the Styles tab, scroll down, and paste the code into the Inject CSS Code box. Below is a demo using a cloned version of your form:

    How can I make a clear differentiation in fields on an input table? Image 1 Screenshot 20

    Please feel free to see the results here. Give it a try, and let us know how it goes.

  • Aquatics_Bahamas
    Replied on November 20, 2023 at 3:31 PM

    Thank you that worked perfectly fine.... Can I highlight groups of fields from the first column to differentiate rooms 1, 2, 3, 4, etc?

  • Victorino_S JotForm Support
    Replied on November 20, 2023 at 8:16 PM

    Hi Aquatics_Bahamas,

    Thanks for getting back to us. I’ll need a bit of time to look into this. I’ll get back to you as soon as I can.

  • Victorino_S JotForm Support
    Replied on November 20, 2023 at 8:28 PM

    Hi Aquatics_Bahamas,

    Thanks for patiently waiting. Please copy and paste the CSS code below into your form to differentiate the rooms in the Input Table field. You can change the background color by replacing the colors

    /* Set the colors depending on room | Thread: 9285961 */
    #cid_21 > table > tbody > tr:nth-child(n+2):nth-child(-n+5) > th {
      background: yellow !important;
    }

    #cid_21 > table > tbody > tr:nth-child(n+6):nth-child(-n+9) > th {
      background: red !important;
    }

    #cid_21 > table > tbody > tr:nth-child(n+10):nth-child(-n+13) > th {
      background: blue !important;
    }

    #cid_21 > table > tbody > tr:nth-child(n+14):nth-child(-n+17) > th {
      background: green !important;
    }

    #cid_21 > table > tbody > tr:nth-child(n+18):nth-child(-n+21) > th {
      background: pink !important;
    }

    #cid_21 > table > tbody > tr:nth-child(n+22):nth-child(-n+25) > th {
      background: brown !important;
    }

    #cid_21 > table > tbody > tr:nth-child(n+26):nth-child(-n+29) > th {
      background: maroon !important;
    }

    #cid_21 > table > tbody > tr:nth-child(n+30):nth-child(-n+33) > th {
      background: cyan !important;
    }

    #cid_21 > table > tbody > tr:nth-child(n+34):nth-child(-n+37) > th {
      background: purple !important;
    }

    #cid_21 > table > tbody > tr:nth-child(n+38):nth-child(-n+41) > th {
      background: gray !important;
    }

    #cid_21 > table > tbody > tr:nth-child(n+42):nth-child(-n+45) > th {
      background: teal !important;
    }

    #cid_21 > table > tbody > tr:nth-child(n+46):nth-child(-n+49) > th {
      background: olive !important;
    }

    #cid_21 > table > tbody > tr:nth-child(n+50):nth-child(-n+53) > th {
      background: lime !important;
    }

    #cid_21 > table > tbody > tr:nth-child(n+54):nth-child(-n+57) > th {
      background: navy !important;
    }

    #cid_21 > table > tbody > tr:nth-child(n+58):nth-child(-n+61) > th {
      background: silver !important;
    }

    /* END */


    Sample Result:

    How can I make a clear differentiation in fields on an input table? Image 1 Screenshot 20


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

  • Aquatics_Bahamas
    Replied on November 20, 2023 at 10:24 PM

    Fantastic - it worked perfectly!!!