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 specify 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 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:

   Midnight

   Code Block
   theme
   class=confluenceTd cellhover

   Product details:

   Midnight

   Code Block
   theme
   class=confluenceTd cellhover1

   Data:

   Midnight

   Code Block
   theme
   class=confluenceTd cellhover3

   Image Modified

5. Go to Space Tools and click Look Tools > 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 a cellthe cells in different tables. Notice that cells from different tables are highlighted in different colors.
   Image RemovedImage Added
   Image RemovedImage Added
   Image RemovedImage Added