How to highlight a single cell when mouse is hovered over an Advanced Table cell

This article explains how to highlight a single cell, when the mouse hovers over the cell, in a table created using Advanced Tables. There are two ways to accomplish this:

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

Use a CSS stylesheet in Space Stylesheet

Instructions

1. Log into your Confluence instance as an administrator.
2. Navigate to any existing page and click  to edit the page, or, create a new page.
3. Insert Advanced Table -Table Plus macro. As an example, create a table as shown below:
   
   

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

   class=confluenceTd cellhover

   
   

5. Go to Space Tools > Look and Feel > Stylesheet and enter the following CSS code:
   

6. Click Save.
    

   td.cellhover:hover{
   background-color:lightblue;
   }

7. Open the respective confluence page, hover the mouse over a cell.
   

Using Advanced Tables with the HTML for Confluence app

Instructions:

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

2. Include the HTML for Confluence app and add the CSS code in the macro.
   

   td.cellhover:hover{
   background-color:lightblue;
   }

3. Click Save.
4. Open the respective confluence page, hover the mouse over a cell. The cell is displayed as shown below: