Add alternate shaded rows - Cloud


For this example we will find and change tables that have header rows set, that is, tables where the Repeat Heading Rows option is applied to the first row.

To add alternate shaded rows:

  1. Open the contentstyles.css file in your theme folder.
  2. Within the TABLES section, add the css selector to find all tables with the header set:


    Note: If wanting to find all tables without a header row, you could use the selector: .table-responsive.noheader

    The properties required to select odd and even rows of a table are:

    Even: tr:nth-child(even) td

    Odd: tr:nth-child(odd) td

  3. Add these and the background-color property to set the shading color to create the full definition:

    .table-responsive.header tr:nth-child(even) td {

    background-color:blanchedalmond !important;


    .table-responsive.header tr:nth-child(odd) td {

    background-color: #FFF !important;


Example table before change:

Tables - alternate shading before

Example table after change:

Shaded table