Styling specific columns - CSS

Use case

You need to adjust the styling of the specific columns.

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:nth-child(odd), td:nth-child(odd) {background-color:yellow;}
   /* Styles all odd column names and column cells */
   
   th:nth-child(even), td:nth-child(even) {background-color:green;} 
   /* Styles all even column names and column cells */
   
   th:nth-child(5), td:nth-child(5) {background-color:red;} 
   /* Styles the 5th column name and column cells */
   
   th:nth-child(n+6),td:nth-child(n+6) {background-color:blue;} 
   /* Styles the 6th and all following column names and cells */

   CSS

5. Save the macro and the page.

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