Apply 2 CSS to 2 HTML tables in one email

[Antoine_C]

Hello,

I am trying to generate results from a DAX query on a PBI dataset, with the specificity to split the results in 2 tables : one for positive results, the other for negatives.

And for each, I have stored the results in 2 HTML tables, did 2 CSS that are exactly the same except that the last column containing my % should be red for the negatives table, and green for the positives.

Red text for last column in neg table

Green text for last column in pos table

When I run it, I get this :

Both tables have the last column green, meaning that in some way the CSS for the second table overrides the first one.

Are there any way to avoid/workaround this ?

Thanks a lot for the help !

Best regards

[Chriddle]

You need to add a CSS class to differentiate the tables.

In table 1's HTML replace <table> with <table class="table1">

and in its CSS replace table tbody ... with table.table1 tbody ...

You can, although probably not necessary, do the same with table 2 and a different class name.

[Antoine_C]

Thanks for the answer.

The HTML table is not coded, it's a simple "Generate HTML table" action.

How can I change the class of this table ?

Or does that mean I have to code it to get the behaviour I want ?

Regards

[Chriddle · Accepted solution]

Just add  Compose actions and do the replacements.

An example:

Compose:

concat(
	'<style>table.table1 tbody td:last-child{color:#FF2220}</style>',
	replace(body('Create_HTML_table'), '<table>', '<table class="table1">')
)

Compose 2:

concat(
	'<style>table.table2 tbody td:last-child{color:#3CD274}</style>',
	replace(body('Create_HTML_table_2'), '<table>', '<table class="table2">')
)

[Antoine_C]

Yes that works !

Thanks a lot !