Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

This article explains how to highlight a single cell with different colors created using Advanced Tables when the mouse hovers over the cell.

...

  1. Log into your Confluence instance as an administrator.
  2. Navigate to the existing 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 macro on the Advanced Tables Editor-Table Plusscreen, under Column settings and add the Column attributes as below.
    Note: The table class should be different for each table.

    Sales Statistics table:

    Code Block
    class=confluenceTd cellhover

    Product details:

    Code Block
    themeMidnight
    class=confluenceTd cellhover1

    Data:

    Code Block
    class=confluenceTd cellhover3


    Image Modified

  5. Go to Space Tools and click Look and Feel.
  6. Under Stylesheet tab, enter the CSS code and click Save.

     

    Code Block
    themeMidnight
    td.cellhover:hover {
    background-color: lightblue;
    }
    
    
    td.cellhover1:hover {
    background-color: red;
    }
    
    td.cellhover3:hover {
    background-color: green;
    }
    
    


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




...