pdf export of table does not retain background colors?

[Melinda J]

I'm using Confluence 5.10.8 and when I use pdf export to export a page containing a table, the export works except it does not retain the cell background colors I had applied in the table.  Is there a way to retain these colors?  

[Deleted user]

I have this issue still in the latest version of Confluence Cloud. Table background colours do not persist no matter what the format of the export is: Word, PDF or HTML.

For the HTML part, I discovered what I believe is the problem. The table styles are being written inline instead of in the site.css style sheet. For whatever reason, my browser doesn't pick up the colours inline, but it does pick them up if they're in the site.css style sheet. I manually worked around this by adding the styles myself to the CSS stylesheet, but it took hours to figure out. And not everyone will be able to do it.

So I recommend that Atlassian changes the way table colours are rendered. Don't use inline HTML attributes! Instead, create a new class for each colour, add the class to the HTML element instead of the colour attribute, and then do the styling on the class.

For anyone interested, the workaround is as follows. You have to repeat it for each colour... but with some regex magic I'm sure you could make it work for multiple colours:

• Export your page(s) to HTML- you'll get a zipped folder containing the HTML file and the CSS style sheet
• Open the HTML file in Notepad++
• Optionally format the ugly auto-generated HTML so it's easier to read by pasting it in here: https://htmlformatter.com/. Copy and paste the resultant HTML back to your HTML file and save.
• Search for the element that is being wrongly coloured (I searched for the text within that table's cell). It will either be a <th> or a <td> element. 
• Look at the background-color attribute. It will be background-color="#ff00ff" for example.
• Copy the entire attribute declaration to the clipboard e.g. copy this: background-color="#ff00ff"
• Use Notepad++'s find/replace feature to replace all occurences of background-color="#ff00ff" with class=myClassName. Make up whatever name you like for the class.
• Now open the CSS file. Mine was called site.css.
• Add a new selector to the CSS file for the newly referenced class and set the background colour to the one you want. So in this case we'd add this selector:
  • .myClassName{
    background-color: #ff00ff;
    }

In a nutshell, you are moving inline HTML attributes away from the HTML document and replacing them with CSS styles that are applied via classes. For the advanced user with lots of styles to worry about, you could use Notepad++'s regex feature and use a group to capture the background colour and then create a class based on the background colour where the class name was somehow derived from the background colour... And then you could probably automate a lot of this.

Or maybe there are tools that allow you to run HTML through them and they spit out CSS in place of the inline attributes... 

[Guy BRUNEAU]

From Confluence Cloud to HTML it looked like

<td data-highlight-colour="#b3d4ff" 

Used Notepad++ to replace using regex

Find What: data-highlight-colour="(#[0-9a-fA-F]{6})"

Replace With: style="background-color:$1"

Worked fine for HTML

[AnnWorley]

I tested on Confluence 5.10.8 and the cell colors were in the PDF export. Are you using the native Confluence tools (they are Space Tools>Content Tools>Export and the ... menu>export to PDF)?

There are a lot of pouplar add-ons for exporting to PDF, I wonder if you are using one of them?

[Melinda J]

I have tried using Space Tools>Content Tools>Export as you suggested and still lose the background cell colors in my table.  Also have same issue if I use the ellipsis and select export to pdf.   Do you still think an add-on is in use for exporting pdf?