web
You’re offline. This is a read only version of the page.
close
Skip to main content
Community site session details

Community site session details

Session Id :
Power Automate - Building Flows
Answered

CSS Styling - Text Align particular column not working

(0) ShareShare
ReportReport
Posted on by 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?

tatmaninov_0-1688482759740.pngtatmaninov_1-1688482788197.png

 

I have the same question (0)
  • Matthy79 Profile Picture
    4,178 Super User 2024 Season 1 on at
    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?

  • tatmaninov Profile Picture
    104 on at
    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.

     

    tatmaninov_1-1688545336065.png

     

     

    tatmaninov_0-1688545296631.png

     

  • Matthy79 Profile Picture
    4,178 Super User 2024 Season 1 on at
    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.

  • tatmaninov Profile Picture
    104 on at
    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)?

  • Verified answer
    Matthy79 Profile Picture
    4,178 Super User 2024 Season 1 on at
    Re: CSS Styling - Text Align particular column not working

    It would look like this:

     

    Matthy79_0-1688566159889.png

     

    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"}}}

     

  • tatmaninov Profile Picture
    104 on at
    Re: CSS Styling - Text Align particular column not working

    Thanks for your help @Matthy79 

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Responsible AI policies

As AI tools become more common, we’re introducing a Responsible AI Use…

Chiara Carbone – Community Spotlight

We are honored to recognize Chiara Carbone as our Community Spotlight for November…

Leaderboard > Power Automate

#1
Michael E. Gernaey Profile Picture

Michael E. Gernaey 659 Super User 2025 Season 2

#2
Tomac Profile Picture

Tomac 386 Moderator

#3
chiaraalina Profile Picture

chiaraalina 290

Last 30 days Overall leaderboard