Page Comparison

This article explains how to highlight a single cell created using Advanced Tables when , when the mouse hovers over the cell, in a table created using Advanced Tables for Confluence. There are two ways to accomplish this, "Using the CSS Stylesheet in Space" OR "Using :

• Use a CSS stylesheet in Space Stylesheet
• Use the Advanced Tables for Confluence app along with the HTML macro (HTML for Confluence

...

• )

Use a CSS stylesheet in Space Stylesheet

Instructions:

1. Log into your Confluence instance as a Confluence System an administrator.

2. Anchor
   kb_cellHighlight_cssStylesheetStep2 kb_cellHighlight_cssStylesheetStep2

   Navigate to the any existing page and click  to edit the page, or, create a new page.
3. Insert Advanced Table -Table Plus macro. For As an example, create a table as shown below:
   Image RemovedImage Added
   

4. Edit the macro on and add the following Column attribute under Column settings in the Advanced Tables Editor-Table Plus screen, under Column settings and add the Column attributes as below.:
   

   Code Block
   theme Midnight
   class=confluenceTd cellhover

   
   Image Modified

5. Go to Space Tools

   and click

    > Look and Feel

   .
6. Under Stylesheet tab, enter the CSS code.
   Image Removed

7. Click Save.
   Image Removed 

   > Stylesheet and enter the following CSS code:
   

   Code Block
   theme Midnight
   td.cellhover:hover{ background-color:lightblue; }

   Image Added

   
   

8. Click Save.

   Image Added 

Open the

...

relevant Confluence page

...

and hover the mouse over a cell. The cell is highlighted in the specified color.

Image Modified

Using Advanced Tables for Confluence with the HTML macro (HTML for Confluence

...

)

Instructions:

1. Log into your Confluence instance and follow follow Step 2 to Step 4 from the instructions above set of instructions. 

2. Include the HTML for Confluence app  macro and add the CSS code in the macro .
   Image Removedas follows:

   Code Block
   theme Midnight
   td.cellhover:hover{ background-color:lightblue; }

   Image Added

3. Click Save.

Open the

...

relevant Confluence page

...

and hover the mouse over a cell. The cell is displayed as shown below:

...

Image Added