How to highlight multiple tables distinctively while hovering the respective cells

This article explains how to highlight different tables' cells with distinct colors while hovering the respective cells using Advanced Tables for Confluence. This article suggests using the CSS Stylesheet that exists in the Confluence Space Administrator section apart from Global Stylesheet.

Instructions:

1. Log into your Confluence instance as an administrator ensuring you have the space administrator access.

2. Navigate to the intended page and:

   • click 

      to edit the page or

   • create a new page

3. Insert Advanced Table - Table Plus macro. For example, create a table as shown below:
   

4. Edit the respective table macro editor by adding the Column attributes values in the Column settings tab as shown below:

   
   Sales Statistics table:

   class=confluenceTd cellhover

   Product details:

   class=confluenceTd cellhover1

   Data:

   class=confluenceTd cellhover3
   Open

   

5. Go to Space Tools > Look and Feel.

6. Enter the CSS code in the Stylesheet tab and click Save.
   

   
    Find the CSS code below:
   td.cellhover:hover { background-color: lightblue; } td.cellhover1:hover { background-color: red; } td.cellhover3:hover { background-color: green; }

7. Open the respective confluence page and hover the mouse over the cells in different tables. Notice that cells from different tables are highlighted in different colors.