Table Row Highlighter - CSS Hack

[#1]

(Said in an infomercial voice) Has this ever happened to you? You are on a Zoom/Teams call, looking at a large table, and people are confused where on the table you are pointing (insert video of really irritated people)? Did you waste time, trying to figure out what row your colleague was talking about? Well your troubles are over with this simple CSS hack!

The CSS

With a one very simple CSS rule, a table row will highlight with the defined background color on mouseover. This highlighting makes it easy for other to see what row you are on, this highlight helps when reviewing and editing wide tables. Here is the rule:

table.confluenceTable tr:hover {
    background: #F5F5F5;    
}

The background color here is set with a light gray. Any other color can be used as desired. You can find more color hex codes here: HTML Color Values.

The Result

In the table below, the cursor/mouse is over the third row.

Installation

Updating the Stylesheets

Installing this CSS rule is as easy as adding it to your space or global stylesheet.

To edit a space's CSS stylesheets:

1. Go to the space and choose Space tools > Look and Feel from the bottom of the sidebar
2. Choose Stylesheet then Edit.
3. Paste your custom CSS into the text field.
4. Save your changes. The new CSS will be visible on all content pages in the space.

To edit your global CSS stylesheet:

1. Choose  > General Configuration > Stylesheet. 
   
2. Choose Edit.
3. Paste your custom CSS into the text field.

4. Choose Save.

See Styling Confluence with CSS for more info.

User Macro

If for some reason you want to enable row highlighting on a page by page basis, rather than at the space or global level, you can insert a simple user macro on the page. Below is the code:

## Macro title: Table Row Highlighter
## Developed by: Bill Bailey, MarketCom, LLC
## Date created: 2020.10.09
## Version 0.1

## @noparams
<style type="text/css">
table.confluenceTable tr:hover {
    background: #F5F5F5;    
}
</style>

The macro could be further customized to add a parameter to allow programmability of the highlight color.

Note: Updating the stylesheet enables the row highlighter in both the page view and edit modes. The user macro only enables the highlighter in view mode.