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