Skip to main content

Notifications

Power Automate - General Discussion
Answered

HTML/CSS Formatting Altering When Sending Email

(0) ShareShare
ReportReport
Posted on by 21

Hi Everyone, I am pulling my hair out a bit at why CSS formatting that works elsewhere seems to not work when it is used in a send email action.

 

The key elements that don't seem to work are that the column widths are not fixed (using table-layout: fixed; width: 70% - longer column names result in wider column) and that the first column values do not left-align (using td:first-child).

I have a simple flow that sends an email using HTML to define the body and I define the CSS formatting as below, however, if I try the code on the following link: W3Schools Tryit Editor it behaves as expected. Does anyone else find this? Is there an obvious error in my code that someone can spot?

 

Desired/expected outcome

screenshot taken from the website linked above

Mattcr_0-1706263721851.png

 

Power Automate email

screenshot taken from the email received by Power Automate.

Mattcr_1-1706263746841.png

 

My Flow

Mattcr_2-1706263791920.png

The Send an email just has myself as recipient, and then the body of the email defined with the below code. No other options are changed from the default.

 

HTML

 

<style>
 
 table{ /* Table */
   table-layout: fixed;
   width: 70%;
   border-collapse: collapse;
}
 
 th {  /* Table  Headers*/
  border: 1px solid black;
  text-align: center;
  font-size: 12px;
  font-family: "Montserrat";
}
 td {  /* Table  Data*/
  border: 1px solid black;
  text-align: center;
  font-size: 11px;
  font-family: "Montserrat";
}
 
td:first-child {
    text-align: left;
}
 
</style>
 
 
<table>
  <tr>
    <th>Col Name</th>
    <th>Col 1</th>
    <th>Col 2</th>
    <th>Col 3</th>
    <th>Col 4</th>
    <th>Col 5</th>
    <th>Col 6</th>
    <th>Col Name</th>
  </tr>
  <tr>
    <td>123</td>
    <td>123</td>
    <td>123</td>
    <td>123</td>
    <td>123</td>
    <td>123</td>
    <td>123</td>
    <td>123</td>
  </tr>
</table>

 

  • Mia_ Profile Picture
    Mia_ 20 on at
    Re: HTML/CSS Formatting Altering When Sending Email

    My css email formatting looks great on Windows desktop and outlook

     

    But falls over in outlook online.

     

    (?)

  • Mattcr Profile Picture
    Mattcr 21 on at
    Re: HTML/CSS Formatting Altering When Sending Email

    Thanks for your reply! You are correct with your two observations that the difference is the width of the columns and that the first column has left-aligned data.

     

    As you've pointed out it's simply that Outlook doesn't support more advanced features of HTML like nth-child so I will have to find an alternative method and use inline styling! For reference my HTML is generated using the compose action so I will likely need to be smart with finding and replacing elements of that HTML string to use inline properly.

     

    Thanks for taking the time to help!

  • Verified answer
    David_MA Profile Picture
    David_MA 8,970 on at
    Re: HTML/CSS Formatting Altering When Sending Email

    I cannot spot any issues in your HTML, but with e-mail you need to use the most basic HTML syntax as it doesn't support a lot of the modern features. The following works for me:

     

    <style>
     Body {
     font-family: Arial, Helvetica, sans-serif;
     }
     h1,
     h2,
     h3,
     h4,
     h5 {
     color: #002766;
     }
     Table {
     font-family: Arial, Helvetica, sans-serif;
     background-color: #fff;
     border-collapse: collapse;
     min-width: 850px;
     border: 1px solid #b4b9be;
     }
     Table th {
     font-size: 15px;
     font-weight: 700;
     text-align: center;
     background-color: #0091f7;
     color: #fff;
     }
    th, td {
     padding: 8px;
     border: 1px solid #cdebff;
    }
    tr:nth-child(even) {background-color: #f4f6f2 }
    </style>

     

    Note: the style tr:nth-child(even) {background-color: #f4f6f2 does not work in Outlook at least. I am hoping one day it will be supported. Except for defining the min-width of the table, I have not found a way to define the width of each column.

     

    However, like I said, you need to go back to the early days of HTML and you will probably need to do inline styling of every td to define the width you are looking for. P.S. I don't see any real difference in your two screen shots except that the text in the first cell of the body on your website is left-aligned rather than centered.

     

    This is a good post on how to format HTML e-mails for the best layout: HTML Emails: Everything You Need To Know | monday.com Blog

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

Microsoft Kickstarter Events…

Register for Microsoft Kickstarter Events…

Announcing Our 2025 Season 1 Super Users!

A new season of Super Users has arrived, and we are so grateful for the daily…

Announcing Forum Attachment Improvements!

We're excited to announce that attachments for replies in forums and improved…

Leaderboard

#1
WarrenBelz Profile Picture

WarrenBelz 145,508

#2
RandyHayes Profile Picture

RandyHayes 76,287

#3
Pstork1 Profile Picture

Pstork1 64,839

Leaderboard