How can I access table header property to change color?

[Andrzej]

Hello,

Can you tell me how can I access header of the table to change the text color / color of the bacground?

Does it have some specific class? So I can set the rule like 'Header:bacground-color:red'?

Currently when I'm setting bacground-color, the color is change in the table itself.

[Richard · Accepted solution]

I believe you can enter in between brackets

{color:red}

Header

{color} 

[Andrzej]

nope, it seems doesn't work :/ 

[Andrzej]

additionaly, i need to color 'Edit' button to green, when I'm changing the bacground using 'CSS styles to apply on the edit button', whole bacground it's changed, not just the blue part 

[Stiltsoft support]

Hi @Andrzej ,

We develop the Table Filter, Charts & Spreadsheets for Confluence app that provides the Table Transformer macro with a custom CSS tab.

Here is an example where we color cells' background (header and regular cells) of the table placed inside the macro.

th {background-color:red;}

Maybe this somehow helps your case. 

[Andrzej]

Is there any way to change the font colour as well? 

[Stiltsoft support]

Via the Table Transformer and its CSS Stylesheet tab you mean?

[Andrzej]

Yes, I don't know how to change the header font color. I think the table transformer is not overwriting the confiforms header color but is just covering the default confiforms grey color.

[Stiltsoft support]

Regular CSS code should work pretty fine. You may try smth like this:

th, th > * {color: red;}

For me it works for a native manually created table wrapped inside the Table Transformer macro (on Data Center based on the tags).

For Cloud it will be just th {color: red;}

[Andrzej]

Ok, it worked! Sorry, I'm not as advanced in CSS. Just one final thing: I need to have the border on the top and bottom but not on the left and right. Can you help with this

[Stiltsoft support]

Here are several examples with borders that you may take for your case.

Seems that the CSS from the green info block is exactly what you need. 

[Andrzej]

.

[Stiltsoft support]

To work with any specific columns, you may use the FORMATWIKI function as well.

Why the particular CSS won't work for your case, you need to check the HTML-structure of your page. As your table is not a manually created one, it may somehow differ.

What concerns the Table Filter macro, its filtration panel is always placed on top of the source table.

If you see it in the bottom, I assume that you have the following configuration: "source table <- Table Filter <- Table Transformer". In the Table Transformer macro you choose to Hide tables (but the filtration panel stays as it is as you didn't choose the Hide all content option). So, you see the table coming from the Table Transformer macro and under it you see the filtration panel that belongs to the hidden table. 

So, you may create the "source table <- Table Transformer <- Table Filter" structure instead.

Also, if you have any other questions regarding the app (now or later), please refer to our support portal that is confidential and where you can attach page storages/logs/ screenshots for our investigations.