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

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?

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:

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

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

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.

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:

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

Fantastic - it worked perfectly!!!