nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Applying styling to Pivot Table using Table Transformer and CSS

Green, Desmond

I'm using a pivot table, which works nicely to get me the data I need. But I don't like the grey look, and want to change the formatting of the table.

I've wrapped the pivot table in a Table Transformer, but can't figure out how to use the Stylesheet configuration of this macro to adapt the table to how I want it to look.

Specifically, I would like the first row 'Automation status' and 'Count' to remain in bold but the background to be the standard Light Blue 35% background.

Next, I would like the first column in the next rows to not have a grey background, and probably just normal text, not bold. That is, each of the cells 'Automated', 'Not Automated' and 'Total'.

When I try to set what I think is the right CSS, the combinations of TH or TR tags used in the pivot table seems to mean I am always getting it wrong!

Pivot table.JPG

Accepted answers

All comments

Stiltsoft support

Hi @Green, Desmond ,

As you've mentioned the Pivot Table and Table Transformer macros, I suppose you use our Table Filter, Charts & Spreadsheets for Confluence app.

If you have questions regarding the app, you may refer to our support portal.

Meanwhile, you may read about the styling here:

https://docs.stiltsoft.com/tfac/cloud/advanced-table-cells-formatting-58426218.html

https://docs.stiltsoft.com/tfac/cloud/stylesheet-tab-altering-table-display-with-css-172036808.html

Green, Desmond

Yes, funnily enough the second page was what I referred to in my attempts to get this working. Just using one of the examples and recognising that the colours are awful, I still can't work out how to apply this to my particular use case.

th {background-color:red;} /* Adjusts the background color of the header row */

tr {background-color:yellow;} /* Adjusts the background color of the table rows */

As I said, the pivot table seems to introduce TH elements, but I want the actual first row to have the style I set out, while the other TH elements in rows 2, 3, 4 (or more) to just be unbolded text and no background colour.

So my question remains: when wrapping a pivot table with a table transformer; how do I make that first row with 'Automation status' and 'Count' with a Light Blue 35% background, while the other cells in the first column of all other rows (presumably also underlying TH's) without any color background, and not bold text?

Pivot table.JPG

Stiltsoft support

You may try to use the second option with the FORMATWIKI then.

Green, Desmond

Ok, I can try. I've taken this approach in some other cases, until I later found a really neat and easy (and actually proved to be simpler) CSS solution. Probably more maintainable too. In such cases, I wished I had used the CSS approach instead of the FORMATWIKI.

I was hoping for some CSS magic or a relatively straightforward answer on here, to that end.

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

confluence

filter

data-center

table

css

table-filter

table-filter-and-charts

confluence-data-center

table-transformer

table-filter-charts-spreadsheets

pivot-table