Table headings styling with CSS

[Kris Fininen]

We found the Confluence classes that control the background and font colors for table headings and are able to style them as needed, except for one problem. If for some reason we want to change a heading style using the Confluence Tiny MCE editor's table controls, we are not able to do so.

Here are the classes we're using to control both the horizontal and vertical table headings:

table.confluenceTable th.confluenctTh, table.confluenceTable td.highlight {
     background-color: #4169e1 !important;
     color: #fff !important;
}

.wiki-content .tablesorter-header-inner {
     color: #fff !important;
}

We tried removing the !important rule but doing so causes the headers to revert to the default Confluence style.

Is there any way to only change the default header style yet still be able to use Confluence's table controls when we need different styling? We don't want writers to have to use the source editor to apply classes - we want them to use the built-in editor. Any ideas?

Thanks everyone!

[Bill Bailey · Accepted solution]

Well you have an order of precedence issue. Inline styles are the highest, then your custom CSS at the space/system level, then the default system CSS.

My suggestion is that if you need to have a range of styles, that you create a user macro that sets a class on the a div wrapper (probably controlled via a parameter). Then a user inserts the user macro, selects a class from the drop-down, and inserts the table inside the user macro body.

then your CSS rules would be something like:

.YourClass th.confluenctTh {
     background-color: #4169e1 !important;
     color: #fff !important;
}

The other option is to just create CSS rules that rewrite the default colors, so that when a user selects gray, they get one of your colors, etc.

[Kris Fininen]

Thanks Bill,

We don't have any experience writing User Macros. Perhaps we'll give option #2 a try. Really appreciate your response.