Answered

CSS Styling - Text Align particular column not working

(0) Share

Report

Posted on by tatmaninov

104

I have a basic flow where by I Get data from as list select the columns I want, transfer to html table and apply CSS style then send in an email, this all works fine, but for the life of me I can't seem to right align text in a particular column (2nd column).

I am using this in my CSS style code

table td:nth-child(2)
{
text-align: right
}

I have tried this piece of code in CSS designer/tester (https://divtable.com/table-styler/) and it works fine, but as soon as I transfer it to power automate the text-align does not apply.

Can anyone spot stupid mistake I might make?

Categories:

Business Process Flows

I have the same question (0)

All responses (6)

Answers (1)

Matthy79 4,178 Super User 2024 Season 1 on at

Like (0)

Report

Re: CSS Styling - Text Align particular column not working

Your code looks fine. Do you use Outlook to view the table? Because Outlook often doesn't show things correct. Have you tried to send the same email to a different account where you don't use Outlook?

Was this reply helpful? Yes No
tatmaninov 104 on at

Like (0)

Report

Re: CSS Styling - Text Align particular column not working

Thanks for reply @Matthy79 , I am using Outlook and had not tried viewing email in a different program, I sent email to my Gmail and unfortunately this did not help.

After some further tinkering I have been able to get my desired result by abandoning the CSS style sheet and putting the text alignment directly in html code like this. I would much prefer to understand what is going on with the CSS style and get that to work, but failing that I will progress as below.

Was this reply helpful? Yes No
Matthy79 4,178 Super User 2024 Season 1 on at

Like (0)

Report

Re: CSS Styling - Text Align particular column not working

Did you send the test mail directly or did you forward it. Forward didn’t work but to send it directly worked fine for me. I tested it on my mobile phone getting the correct alignment in 2 different apps and even if I took the content from my outlook and saved it to a file, it worked with my browser. So for me it is clear that this is an Outlook bug.

As for your solution. Of course you can always format your email by yourself. For large tables I would suggest you use one select action to do the work instead of an “apply to each” and a variable.

Was this reply helpful? Yes No
tatmaninov 104 on at

Like (0)

Report

Re: CSS Styling - Text Align particular column not working

This is a strange one, I don't see it working in the email in Outlook or Gmail (neither forwarded), but when I save html code from email to text file with .html extension and open up in web browser it displays properly, so as you suggest something strange going on with outlook I think.

Thanks for the pointer on trying to avoid "apply to each", if I go with the select route how do I incorporate the td style tag (like in my above screen shots of the append to string)?

Was this reply helpful? Yes No
Verified answer

Matthy79 4,178 Super User 2024 Season 1 on at

Like (1)

Report
Re: CSS Styling - Text Align particular column not working

It would look like this:

Here is a sample to copy and paste into a dummy flow.

{"id":"a1a99589-9693-4ed4-932e-e00ac686308f","brandColor":"#8C3900","connectionReferences":{"shared_office365":{"connection":{"id":"/providers/Microsoft.PowerApps/apis/shared_office365/connections/1597557c9920416e9a930edfee990646"}},"shared_commondataserviceforapps":{"connection":{"id":"/providers/Microsoft.PowerApps/apis/shared_commondataserviceforapps/connections/62947705b1a746319ca1e59aae985afc"}}},"connectorDisplayName":"Control","icon":"data&colon;image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDMyIDMyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KIDxwYXRoIGQ9Im0wIDBoMzJ2MzJoLTMyeiIgZmlsbD0iIzhDMzkwMCIvPg0KIDxwYXRoIGQ9Im04IDEwaDE2djEyaC0xNnptMTUgMTF2LTEwaC0xNHYxMHptLTItOHY2aC0xMHYtNnptLTEgNXYtNGgtOHY0eiIgZmlsbD0iI2ZmZiIvPg0KPC9zdmc+DQo=","isTrigger":false,"operationName":"Scope_html_table","operationDefinition":{"type":"Scope","actions":{"Compose_Dummydata":{"type":"Compose","inputs":[{"Title":"Title 1","GrandTotal":345},{"Title":"Title 2","GrandTotal":123},{"Title":"This is title 3","GrandTotal":12},{"Title":"This is title 4","GrandTotal":5},{"Title":"This is title 5","GrandTotal":89},{"Title":"This is title 6","GrandTotal":75}],"runAfter":{},"metadata":{"operationMetadataId":"afa0b7f2-b025-4ecc-86d6-e5ea61f86e33"}},"Select_Dummydata":{"type":"Select","inputs":{"from":"@outputs('Compose_Dummydata')","select":"@concat('<tr><td>', item()['Title'], '</td><td style=\"text-align:right\">', item()['GrandTotal'], '</td></tr>')"},"runAfter":{"Compose_Dummydata":["Succeeded"]},"metadata":{"operationMetadataId":"7ca944ea-206f-4cc3-a413-3243c882e34c"}},"Compose_Dummyoutput":{"type":"Compose","inputs":"<table style=\"border:1px solid #eeeeee>\n<thead style=\"background:#1C6EA4\">\n<tr><th>Project</th><th>Euro Value</th></tr>\n</thead>\n<tbody>\n@{join(body('Select_Dummydata'),'')}\n</table>","runAfter":{"Select_Dummydata":["Succeeded"]},"metadata":{"operationMetadataId":"a4c995da-f829-4eb2-bc7a-11ce743a71f7"}}},"runAfter":{},"metadata":{"operationMetadataId":"3786cc1e-acf1-4164-a8ec-03da4612cf9f"}}}

Was this reply helpful? Yes No
tatmaninov 104 on at

Like (0)

Report

Re: CSS Styling - Text Align particular column not working

Thanks for your help @Matthy79

Was this reply helpful? Yes No