Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in

It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

Table Row Highlighter - CSS Hack

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

TableRowHighlight.png

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.

 

0 comments

Comment

Log in or Sign up to comment
TAGS
Community showcase
Published in Confluence

Table Row Highlighter - CSS Hack

(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 real...

164 views 0 2
Read article

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you