Versions Compared

Version Old Version 1 New Version Current
Changes made by

Manisha Kharga

Sireesha Dugginapeddi [Appfire] (Inactive) (Deactivated)

Saved on

Key

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

...

...

...

...

This article explains how to highlight

...

different tables' cells with distinct colors while hovering the respective cells using Advanced Tables 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

...

  1. intended page and:
    • click Image Modified to edit the page or
    • create a new page

...

  2. Insert Advanced Table - Table Plus macro. For example, create a table as shown below:

...

  1. Image Added

  2. Edit the

...

class=confluenceTd cellhover

  1. 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

  2. Go to Space

...

  1. Tools > Look and Feel.

...

  1. Enter the CSS code in the Stylesheet tab and click Save.
    Image Added
     Find the CSS code below:

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


td.cellhover1:hover {
background-color: red;
}

td.cellhover3:hover {
background-color: green;
}


  2. Open the respective confluence page

...

  1. and hover the mouse over

...

  1. the cells in different tables. Notice that cells from different tables are highlighted in different colors.
    Image Added
    Image Added
    Image Added