Styling specific rows - CSS

Use case

You need to adjust the styling of the specific rows.

Solution

1. Switch the page to the edit mode.

2. Insert the Table Transformer macro and paste the table or the macros outputting tables within the macro body.

3. Select the macro and click Edit.

4. In the Stylesheet tab enter any of the following CSS:
   

   th {font: 15px Verdana;} /* Styles the header row */
   
   tr:nth-child(odd) {background-color:yellow;} /* Styles all odd rows */
   
   tr:nth-child(even) {background-color:red;} /* Styles all even rows */
   
   tr:nth-child(5) {background-color:blue;} /* Styles the 5th row*/
   
   tr:nth-child(n+6) {background-color:green;} /* Styles the 6th and all following rows */

   CSS

5. Save the macro and the page.

More examples involving the :nth-child pseudo-class are available in the following article.