How to change the color of matrix rows?

  • jeromejj4
    Asked on January 5, 2017 at 11:31 AM

    Hi,

    I have created a form in which I have survey sorts of questions.  There are many rows all right next to one another and in order to make it easier for the user to see what row they are on while answering the questions, I want to make each row an alternating color.  I'm hoping to use white and maybe a lighter grey than the current default.  I've looked at a couple answers for other forms but I don't do any CSS so I'm not sure how to go about getting it into my form.  It currently has two matrices but there will be more if my co-workers approve of the format.  As such any step by step information you could provide for when I add a new matrix would be amazing.  

     

    Thanks so much,

     

    Jenee

  • Nik_C
    Replied on January 5, 2017 at 12:52 PM

    Please try to copy and paste the below CSS code to your Custom CSS field:

    .form-matrix-table tr:nth-child(odd) td {

    background-color: white !important;

    }

    .form-matrix-table tr:nth-child(even) td {

    background-color:gray !important;

    }

    If you have any further questions please let us know.

    Thank you!

     

  • jeromejj4
    Replied on January 9, 2017 at 12:39 PM

    Thank you!  This worked well for the answer section of the matrix.  Could the grey and white extend to the question rows too rather than just the answer portion of the rows?  Thank you again!

  • David JotForm Support
    Replied on January 9, 2017 at 3:38 PM

    It seems the table headers are all treated as on element.  Styling all of the headers a single color is possible, however, it appears as though the row headers would all need to be the same color. 

    For the row headers:

    .form-matrix-row-headers {

        background: white !important;

    }

     

    For the Column Header background:

    .form-matrix-column-headers {

        background: white !important;

    }

  • jeromejj4
    Replied on January 9, 2017 at 5:07 PM

    Thank you!  The white at least helps with the overall readability even if it doesn't allow for an every other format.