Page Comparison

This article explains how to highlight cells of different tables' cells with different colors created distinct colors while hovering the respective cells using Advanced Tables , one color each for a given table when the mouse hovers over a cell. To achieve this, we would have to use for Confluence. This article suggests using the CSS Stylesheet which  that exists in the Confluence Space Administrator section apart from the Global Stylesheet.

Instructions:

1. Log into your Confluence instance as an administrator ensuring you have the user has the space administrator access.
2. Navigate to the existing intended page and:
   • click Image Modified to edit the page or
   • create a new page
   .
3. Insert Advanced Table - Table Plus macro. For example, create a table as shown below:
   Image Modified

4. Edit the macro on the Advanced Tables Editor-Table Plusscreen, under Column settings and add the Column attributes as below.
   Note: The table class should respective table macro editor by adding the Column attributes values in the Column settings tab as shown below:

   Note
   The table class must be different for each table.

   
   Sales Statistics table:

   Code Block
   class=confluenceTd cellhover

   Product details:

   Code Block
   class=confluenceTd cellhover1

   Data:

   Code Block
   class=confluenceTd cellhover3

   Image Modified

5. Now, go Go to Space Tools Tools > Look and click on Look and Feel.

6. Under Stylesheet tab, enter Enter the CSS code and click in the Stylesheet tab and click Save.
   Image Modified
    Find the CSS code below:

   Code Block
   theme Midnight
   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 show are highlighted in different colors when the cell hovers around the one cell.
   Image Modified
   Image Modified
   Image Modified