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
Power Automate email
screenshot taken from the email received by Power Automate.
My Flow
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
My css email formatting looks great on Windows desktop and outlook
But falls over in outlook online.
(?)
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!
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