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:

Building flows

I have the same question (0)

All responses (4)

Answers (1)

Sort by

Expiscornovus 33,912 Most Valuable Professional on at

Like
a
(0)

Report
Copy link

Link copied!

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.

Was this reply helpful? Yes No
MIA27 2 on at

Like
a
(0)

Report
Copy link

Link copied!

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

Was this reply helpful? Yes No
MIA27 2 on at

Like
a
(0)

Report
Copy link

Link copied!
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

Was this reply helpful? Yes No
Verified answer

Expiscornovus 33,912 Most Valuable Professional on at

Like
a
(1)

Report
Copy link

Link copied!
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

Was this reply helpful? Yes No