How to Alternate Row Colors in Tables

The following tutorial is only necessary if you wish to override the automatic alternating row highlighting that is built-in and based off of the color theme of your survey, chosen under Project-->Distribute-->Default Theme-->Advanced. 

When displaying tables or matrices with many rows and columns, sometimes it is helpful for the survey taker to be able to easily identify each row within the table or matrix. A simple way to provide the visual aid is to alternate the colors of each row by making every other row have a slight background color, usually gray. Luckily, this can be accomplished with a simple adjustment to the Project-->Distribute-->Default Theme-->Themes section of your survey.

Making changes to Look & Feel

• Go to Distribute-->Default Theme
• Select the Advanced... tab on the left
• Choose the Append radio button to display the CSS box
• You will want to add the following code:

  .sg-even-row td {
  background-color: #CCCCCC !important;
  }

  Note: You can change the #CCCCCC hex code to represent any color (#CCCCCC is a dark gray). You can even replace it with the word 'red' (no quotes) if you are not comfortable with hexadecimal color codes.

• Click Save

Secondary Tip: Continuing the Color Through Row Headers (far left column)

Add the following as an addendum below the above entry:

.sg-even-row th {
background-color: #CCCCCC !important;
}

Have questions? Want to comment on this? Join the discussion on our SurveyGizmo Support site.