Add alternate shaded rows to Magellan tables

Magellan user guide

You can use CSS to add alternate shaded rows to Magellan tables.

The following CSS finds and changes tables that have the Repeat Heading Rows option applied to the first row:

  • To add alternate shaded rows:

  1. Open the contentstyles.css file in your theme folder.

  2. Add the following CSS to contentstyles.css, editing it to suit your needs:

    .table-responsive.header tr:nth-child(even) td {
        background-color: blanchedalmond !important;
    }

    .table-responsive.header tr:nth-child(odd) td {
        background-color: #FFF !important;
    }

    Note: If you want to apply these changes to tables without a header row, use the selector .table-responsive.noheader

Example table before change

Tables - alternate shading before

Example table after change

Shaded table