How to change background color of columns in an input table?

  • ColasRoadbridge
    Asked on May 21, 2019 at 12:09 PM

    I have created a form called timesheet which includes a table for input of data. For ease of use I want to colour code the table as per the attached spreadsheet screenshot.

    Jotform Thread 1830857 Screenshot
    Page URL: https://eu.jotform.com/build/91344327258964
  • Kiran Support Team Lead
    Replied on May 21, 2019 at 1:42 PM

    Please try injecting the following CSS code to the form to change the background color of the input fields in the table.

    .form-matrix-values:nth-child(3n+2) > input {

        background-color: #D8E4C0;

    }

    .form-matrix-values:nth-child(3n+3) > input {

        background-color: #FCD5B4;

    }

    .form-matrix-values:nth-child(3n+4) > input {

        background-color: #CBBFD7;


    }

    Thanks!

  • ColasRoadbridge
    Replied on May 22, 2019 at 5:30 AM

    Thanks for that Kiran,


    But the third last column should be orange and the second last column should be purple.

    Can you adjust that.

    Is it also possible to colour the row headings as above??

  • Victoria_K
    Replied on May 22, 2019 at 6:14 AM

    I have adjusted the colors for last columns on your form. Please allow me some time to get the code for row headings.

  • Victoria_K
    Replied on May 22, 2019 at 6:51 AM

    I have added the CSS code to your form to color row headers:

    How to change background color of columns in an input table? Image 1 Screenshot 20

    tr:nth-child(2) > .form-matrix-row-headers {

      background: #1ec70e;

    }

    tr:nth-child(3) > .form-matrix-row-headers {

      background: #feff04;

    }

    tr:nth-child(4) > .form-matrix-row-headers {

      background: #06b0f1;

    }

    tr:nth-child(5) > .form-matrix-row-headers {

      background: #e7f3dd;

    }

    tr:nth-child(6) > .form-matrix-row-headers {

      background: #ffc102;

    }

    tr:nth-child(7) > .form-matrix-row-headers {

      background: #b7dde9;

    }

    tr:nth-child(8) > .form-matrix-row-headers {

      background: #76923a;

    }

    tr:nth-child(9) > .form-matrix-row-headers {

      background: #f8bf8f;

    }

    tr:nth-child(10) > .form-matrix-row-headers {

      background: #95b4d5;

    }

    tr:nth-child(11) > .form-matrix-row-headers {

      background: #948b54;

    }

    tr:nth-child(12) > .form-matrix-row-headers {

      background: #e3dfed;

    }

    tr:nth-child(13) > .form-matrix-row-headers {

      background: #c5bd98;

    }

    tr:nth-child(14) > .form-matrix-row-headers {

      background: #b1a1c7;

    }

    tr:nth-child(15) > .form-matrix-row-headers {

      background: #da9695;

    }

    tr:nth-child(16) > .form-matrix-row-headers {

      background: #538dd6;

    }

  • ColasRoadbridge
    Replied on May 22, 2019 at 7:04 AM

    Thank you Victoria, that is perfect