Answered

Correction in HTML Table Column formatting

(0) Share

Report

Posted on by MIA27

I am using the below code in my style compose code to make first column data of the HTML table and it is working fine, it brings the correct formatting in my email.

#table2 td:first-child {
text-align: right;
}

But when I try the below to apply for the 3rd column, it has no error and no impact of code, it remains as it is - no changes can be seen for the column:

#table2 td:nth-child(3)
{
text-align: right;
}

Is there is other way to write to impact the third row data.

Please advise

Categories:

Business Process Flows

All responses (4)

Answers (1)

Verified answer

Expiscornovus 31,851 Most Valuable Professional on at

Like (1)

Report
Re: Correction in HTML Table Column formatting

Hi @MIA27,

Below is an example for the third column.

In this case I have set the background colour to red.

<style> table td + td + td { background-color: #ff0000; } table td + td + td + td { background-color: #ffffff; } </style> @{body('Create_HTML_table')}

And the test result in Outlook OWA
MIA27 on at

Like (0)

Report
Re: Correction in HTML Table Column formatting

I found some discussion on the this issue
https://stackoverflow.com/questions/73612377/alternatives-to-css-n-th-child-selector-in-html-table-for-outlook

But could not understand how to apply the below in my situation
table.table2 tr td + td + td + td +td { text-align: right; }

Is it possible, to arrange a workaround.

Please guide
MIA27 on at

Like (0)

Report

Re: Correction in HTML Table Column formatting

As I am not very good in html coding, the website has many steps which I need learn.

at least padding is not possible for the a particular column.
No other workaround?.

If possible please guide
Expiscornovus 31,851 Most Valuable Professional on at

Like (0)

Report

Re: Correction in HTML Table Column formatting

Hi @MIA27,

Yes, as far as I am aware the nth:child selector is ignored in Outlook.

Have a look at this article/blog from Ryan Maclean:

https://ryanmaclean365.com/2020/01/29/power-automate-html-table-styling/

He demonstrates in the advanced styling part of that blog how you can build your own custom table with advanced styling. By using that approach instead of the create HTML table you should be able to style the 3rd column.