Change Background Color for Individual Cells on an Input Table

I have an input table of days/times where only certain boxes are able to be checked. I've accomplished this with the following code:

input#input_10_0_0, input#input_10_0_2, input#input_10_0_3, input#input_10_0_5, input#input_10_0_6, input#input_10_1_1, input#input_10_1_2, input#input_10_1_3, input#input_10_1_4, input#input_10_1_5, input#input_10_1_6, input#input_10_2_0, input#input_10_2_3, input#input_10_3_1, input#input_10_3_2, input#input_10_3_4, input#input_10_4_0, input#input_10_4_1, input#input_10_4_2, input#input_10_4_3, input#input_10_4_5 {

    display : none;

}

However, the user currently has to hover over each box to determine whether the day/time is availible. I need to visually indicate that these cells are non-selectable by graying out the background of the cell. I've attempted to use this code to gray out the 10_0_0 cell, but it isn't working:

div#cid_10 > table > tbody > tr:nth-child(0) > td.form-matrix-values:nth-child(0) {

    background-color: gray!important;

}

What needs to be changed? I know I will need to repeat the code for each of the non-selectable boxes, but I can't seem to change the background color of one cell individually. Attached is a screenshot of how I'd like the table to look.

Hi Michela,

Thanks for reaching out to Jotform Support. I’ll need a bit of time to look into this. I’ll get back to you as soon as I can.

We really appreciate your patience and understanding. 

Hi Michela,

Thanks for patiently waiting. Can you try adding the CSS code below? Let me show you how to do that:

• 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.

/* Change input table's cell background color - 14187411*/ 

div#cid_10 > table > tbody > tr:nth-child(2) > td.form-matrix-values:nth-child(2) {

    background-color: #e6e6e6 !important;

}



div#cid_10 > table > tbody > tr:nth-child(2) > td.form-matrix-values:nth-child(4) {

    background-color: #e6e6e6 !important;

}



div#cid_10 > table > tbody > tr:nth-child(2) > td.form-matrix-values:nth-child(5) {

    background-color: #e6e6e6 !important;

}



div#cid_10 > table > tbody > tr:nth-child(2) > td.form-matrix-values:nth-child(7) {

    background-color: #e6e6e6 !important;

}



div#cid_10 > table > tbody > tr:nth-child(2) > td.form-matrix-values:nth-child(8) {

    background-color: #e6e6e6 !important;

}



div#cid_10 > table > tbody > tr:nth-child(3) > td.form-matrix-values:nth-child(3) {

    background-color: #e6e6e6 !important;

}



div#cid_10 > table > tbody > tr:nth-child(3) > td.form-matrix-values:nth-child(4) {

    background-color: #e6e6e6 !important;

}



div#cid_10 > table > tbody > tr:nth-child(3) > td.form-matrix-values:nth-child(5) {

    background-color: #e6e6e6 !important;

}



div#cid_10 > table > tbody > tr:nth-child(3) > td.form-matrix-values:nth-child(6) {

    background-color: #e6e6e6 !important;

}

div#cid_10 > table > tbody > tr:nth-child(3) > td.form-matrix-values:nth-child(7) {

    background-color: #e6e6e6 !important;

}

div#cid_10 > table > tbody > tr:nth-child(3) > td.form-matrix-values:nth-child(8) {

    background-color: #e6e6e6 !important;

}

div#cid_10 > table > tbody > tr:nth-child(4) > td.form-matrix-values:nth-child(2) {

    background-color: #e6e6e6 !important;

}



div#cid_10 > table > tbody > tr:nth-child(4) > td.form-matrix-values:nth-child(5) {

    background-color: #e6e6e6 !important;

}



div#cid_10 > table > tbody > tr:nth-child(5) > td.form-matrix-values:nth-child(3) {

    background-color: #e6e6e6 !important;

}



div#cid_10 > table > tbody > tr:nth-child(5) > td.form-matrix-values:nth-child(4) {

    background-color: #e6e6e6 !important;

}



div#cid_10 > table > tbody > tr:nth-child(5) > td.form-matrix-values:nth-child(6) {

    background-color: #e6e6e6 !important;

}



div#cid_10 > table > tbody > tr:nth-child(6) > td.form-matrix-values:nth-child(2) {

    background-color: #e6e6e6 !important;

}



div#cid_10 > table > tbody > tr:nth-child(6) > td.form-matrix-values:nth-child(3) {

    background-color: #e6e6e6 !important;

}



div#cid_10 > table > tbody > tr:nth-child(6) > td.form-matrix-values:nth-child(4) {

    background-color: #e6e6e6 !important;

}



div#cid_10 > table > tbody > tr:nth-child(6) > td.form-matrix-values:nth-child(5) {

    background-color: #e6e6e6 !important;

}



div#cid_10 > table > tbody > tr:nth-child(6) > td.form-matrix-values:nth-child(7) {

    background-color: #e6e6e6 !important;

}

/* Ends here */

This is what it looks like after adding the code:

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

Amazing, that worked. Thanks so much!