Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in
Deleted user
0 / 0 points
Next:
badges earned

Your Points Tracker
Challenges
Leaderboard
  • Global
  • Feed

Badge for your thoughts?

You're enrolled in our new beta rewards program. Join our group to get the inside scoop and share your feedback.

Join group
Recognition
Give the gift of kudos
You have 0 kudos available to give
Who do you want to recognize?
Why do you want to recognize them?
Kudos
Great job appreciating your peers!
Check back soon to give more kudos.

Past Kudos Given
No kudos given
You haven't given any kudos yet. Share the love above and you'll see it here.

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

Miss the Confluence demos at Team 21? Watch them here!

Phew, Atlassian Team 2021 blew by. With dozens of demos and a handful of keynotes, you may have missed some of the awesome Confluence Cloud sessions. Don't' worry, you can watch them all here or on Y...

310 views 2 6
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