CODEWITHSUNDEEP
htmlhtml-tableformattingpower-automatepower-platform
Matt Nutt
Matt Nutt

Reputation: 11

Power Automate lacking HTML functionality

I've been battling with the functionality of table coding within Power Automate for quite some time now. For my specific case I need to create a table that is sent in an email via automation that contains multiple fields, and some which are spanning multiple columns, with one of these needing to expand in height if the text requires it.

For some unknown reason the full list of coding in HTML / CSS is not available or 'readable' by the flow actions Send an email (V2) and Send an email via shared mailbox (V2) causing unwanted formatting issues in the resulting email. I have used identical code that I tested on W3Schools and via the Old and New designer in Power Automate, I have provided the results below.

In the new designer image below, you can see the formatting is completely broken. I figured out that the 'colspan' value is completely ignored here, so to make the most of things at the moment I have resorted to only using the old designer, until I have come up with a fix or Microsoft have patched the issue at hand.

New Designer

However in the old designer image below, you can see it results in a better styling than the new designer, however the width of the columns have changed in the second table. So the program is ignoring the table-layout value of fixed.

Old Designer

The intended style / end goal is the below resulting image taken from a W3Schools code test, if this result is possible in Power Automate, that is what I require.

End Goal

Original Code is here:

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<p>The below table is the intended layout for this table, where the height of question 6 expands based on the amount of text provided in the answer field. Note the size of the question boxes.</p>

<table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;table-layout:fixed" width=964 object.style.tableLayout="fixed"><tbody>
<tr style="height:24.1pt"><td width=151 style="width:113.1pt;border:solid #969696 1.0pt;background:#5F249F;padding:0cm 5.4pt 0cm 5.4pt;height:24.1pt"><p class="MsoNormal" style="text-align:right"><span style="font-family:&quot;Aptos&quot;,sans-serif;color:white">Question 1:</span><span style="font-family:&quot;Aptos&quot;,sans-serif;color:white;mso-fareast-language:EN-US"><o:p></o:p></span></p></td><td width=331 style="width:248.1pt;border:solid #969696 1.0pt;border-left:none;padding:0cm 5.4pt 0cm 5.4pt;height:24.1pt"><p class="MsoNormal"><span style="font-family:&quot;Aptos&quot;,sans-serif">Lorem ipsum dolor sit amet<o:p></o:p></span></p></td><td width=132 style="width:99.2pt;border:solid #969696 1.0pt;border-left:none;background:#5F249F;padding:0cm 5.65pt 0cm 0cm;height:24.1pt"><p class="MsoNormal" style="text-align:right"><span style="font-family:&quot;Aptos&quot;,sans-serif;color:white">Question 2:<o:p></o:p></span></p></td><td width=350 style="width:262.25pt;border:solid #969696 1.0pt;border-left:none;padding:0cm 5.65pt 0cm 5.4pt;height:24.1pt"><p class="MsoNormal"><span style="font-family:&quot;Aptos&quot;,sans-serif">Lorem ipsum dolor sit amet<o:p></o:p></span></p></td></tr>

<tr style="height:24.1pt"><td width=151 style="width:113.1pt;border:solid #969696 1.0pt;border-top:none;background:#5F249F;padding:0cm 5.4pt 0cm 5.4pt;height:24.1pt"><p class="MsoNormal" style="text-align:right"><span style="font-family:&quot;Aptos&quot;,sans-serif;color:white">Question 3:<o:p></o:p></span></p></td><td width=331 style="width:248.1pt;border-top:none;border-left:none;border-bottom:solid #969696 1.0pt;border-right:solid #969696 1.0pt;padding:0cm 5.4pt 0cm 5.4pt;height:24.1pt"><p class="MsoNormal"><span style="font-family:&quot;Aptos&quot;,sans-serif">Lorem ipsum dolor sit amet<o:p></o:p></span></p></td><td width=132 style="width:99.2pt;border-top:none;border-left:none;border-bottom:solid #969696 1.0pt;border-right:solid #969696 1.0pt;background:#5F249F;padding:0cm 5.65pt 0cm 0cm;height:24.1pt"><p class="MsoNormal" style="text-align:right"><span style="font-family:&quot;Aptos&quot;,sans-serif;color:white">Question 4:<o:p></o:p></span></p></td><td width=350 style="width:262.25pt;border-top:none;border-left:none;border-bottom:solid #969696 1.0pt;border-right:solid #969696 1.0pt;padding:0cm 5.65pt 0cm 5.4pt;height:24.1pt"><p class="MsoNormal"><span style="font-family:&quot;Aptos&quot;,sans-serif">Lorem ipsum dolor sit amet<o:p></o:p></span></p></td></tr>
<tr style="height:24.1pt;mso-height-rule:exactly"><td width=151 style="width:113.1pt;border:solid #969696 1.0pt;background:#5F249F;padding:0cm 5.4pt 0cm 5.4pt;height:24.1pt;mso-height-rule:exactly"><p class="MsoNormal" style="text-align:right"><span style="font-family:&quot;Aptos&quot;,sans-serif;color:white">Question 5:<o:p></o:p></span></p></td>
<td colspan="3" style="border:solid #969696 1.0pt;border-left:none;padding:0cm 5.4pt 0cm 5.4pt;height:24.1pt;mso-height-rule:exactly"><p class="MsoNormal"><span style="font-family:&quot;Aptos&quot;,sans-serif">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac ligula eu purus scelerisque luctus.<o:p></o:p></span></p></td></tr>

<tr style="height:24.1pt"><td width=151 style="min-width:113.1pt;max-width:113.1pt;border:solid #969696 1.0pt;border-top:none;background:#5F249F;padding:0cm 5.4pt 0cm 5.4pt;height:24.1pt"><p class="MsoNormal" style="text-align:right"><span style="font-family:&quot;Aptos&quot;,sans-serif;color:white">Question 6:<o:p></o:p></span></p></td><td colspan="3" style="border-top:none;border-left:none;border-bottom:solid #969696 1.0pt;border-right:solid #969696 1.0pt;padding:0cm 5.4pt 0cm 5.4pt;height:24.1pt"><p class="MsoNormal"><span style="font-family:&quot;Aptos&quot;,sans-serif;max-width:609.55pt;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac ligula eu purus scelerisque luctus.</div><o:p></o:p></p></td></tr>
</tbody></table>

<p>Below is actually what happens when the text is greater than the box provided. Again note the sizing of the question boxes.</p>

<table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;table-layout:fixed" width=964 object.style.tableLayout="fixed"><tbody>
<tr style="height:24.1pt"><td width=151 style="width:113.1pt;border:solid #969696 1.0pt;background:#5F249F;padding:0cm 5.4pt 0cm 5.4pt;height:24.1pt"><p class="MsoNormal" style="text-align:right"><span style="font-family:&quot;Aptos&quot;,sans-serif;color:white">Question 1:</span><span style="font-family:&quot;Aptos&quot;,sans-serif;color:white;mso-fareast-language:EN-US"><o:p></o:p></span></p></td><td width=331 style="width:248.1pt;border:solid #969696 1.0pt;border-left:none;padding:0cm 5.4pt 0cm 5.4pt;height:24.1pt"><p class="MsoNormal"><span style="font-family:&quot;Aptos&quot;,sans-serif">Lorem ipsum dolor sit amet<o:p></o:p></span></p></td><td width=132 style="width:99.2pt;border:solid #969696 1.0pt;border-left:none;background:#5F249F;padding:0cm 5.65pt 0cm 0cm;height:24.1pt"><p class="MsoNormal" style="text-align:right"><span style="font-family:&quot;Aptos&quot;,sans-serif;color:white">Question 2:<o:p></o:p></span></p></td><td width=350 style="width:262.25pt;border:solid #969696 1.0pt;border-left:none;padding:0cm 5.65pt 0cm 5.4pt;height:24.1pt"><p class="MsoNormal"><span style="font-family:&quot;Aptos&quot;,sans-serif">Lorem ipsum dolor sit amet<o:p></o:p></span></p></td></tr>

<tr style="height:24.1pt"><td width=151 style="width:113.1pt;border:solid #969696 1.0pt;border-top:none;background:#5F249F;padding:0cm 5.4pt 0cm 5.4pt;height:24.1pt"><p class="MsoNormal" style="text-align:right"><span style="font-family:&quot;Aptos&quot;,sans-serif;color:white">Question 3:<o:p></o:p></span></p></td><td width=331 style="width:248.1pt;border-top:none;border-left:none;border-bottom:solid #969696 1.0pt;border-right:solid #969696 1.0pt;padding:0cm 5.4pt 0cm 5.4pt;height:24.1pt"><p class="MsoNormal"><span style="font-family:&quot;Aptos&quot;,sans-serif">Lorem ipsum dolor sit amet<o:p></o:p></span></p></td><td width=132 style="width:99.2pt;border-top:none;border-left:none;border-bottom:solid #969696 1.0pt;border-right:solid #969696 1.0pt;background:#5F249F;padding:0cm 5.65pt 0cm 0cm;height:24.1pt"><p class="MsoNormal" style="text-align:right"><span style="font-family:&quot;Aptos&quot;,sans-serif;color:white">Question 4:<o:p></o:p></span></p></td><td width=350 style="width:262.25pt;border-top:none;border-left:none;border-bottom:solid #969696 1.0pt;border-right:solid #969696 1.0pt;padding:0cm 5.65pt 0cm 5.4pt;height:24.1pt"><p class="MsoNormal"><span style="font-family:&quot;Aptos&quot;,sans-serif">Lorem ipsum dolor sit amet<o:p></o:p></span></p></td></tr>
<tr style="height:24.1pt;mso-height-rule:exactly"><td width=151 style="width:113.1pt;border:solid #969696 1.0pt;background:#5F249F;padding:0cm 5.4pt 0cm 5.4pt;height:24.1pt;mso-height-rule:exactly"><p class="MsoNormal" style="text-align:right"><span style="font-family:&quot;Aptos&quot;,sans-serif;color:white">Question 5:<o:p></o:p></span></p></td>
<td colspan="3" style="border:solid #969696 1.0pt;border-left:none;padding:0cm 5.4pt 0cm 5.4pt;height:24.1pt;mso-height-rule:exactly"><p class="MsoNormal"><span style="font-family:&quot;Aptos&quot;,sans-serif">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac ligula eu purus scelerisque luctus.<o:p></o:p></span></p></td></tr>

<tr style="height:24.1pt"><td width=151 style="min-width:113.1pt;max-width:113.1pt;border:solid #969696 1.0pt;border-top:none;background:#5F249F;padding:0cm 5.4pt 0cm 5.4pt;height:24.1pt"><p class="MsoNormal" style="text-align:right"><span style="font-family:&quot;Aptos&quot;,sans-serif;color:white">Question 6:<o:p></o:p></span></p></td><td colspan="3" style="border-top:none;border-left:none;border-bottom:solid #969696 1.0pt;border-right:solid #969696 1.0pt;padding:0cm 5.4pt 0cm 5.4pt;height:24.1pt"><p class="MsoNormal"><span style="font-family:&quot;Aptos&quot;,sans-serif;max-width:609.55pt;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac ligula eu purus scelerisque luctus. Nullam pulvinar mauris eu velit consectetur consequat. Sed enim dolor, interdum quis est at, malesuada vulputate tortor. Nulla laoreet vulputate magna, at vulputate arcu efficitur eu. Quisque in venenatis libero, sit amet laoreet mauris. Pellentesque commodo risus nec metus finibus, eu lobortis nisi pretium. Donec blandit tincidunt eleifend. Integer dapibus suscipit ipsum rutrum porttitor. Pellentesque et orci et massa sodales tempor. Maecenas quis dictum sapien. Cras sit amet dui nisi. Duis nec urna eu lacus faucibus dapibus. Fusce quis commodo purus. Quisque sed accumsan odio. Duis facilisis ac sapien at lobortis.</div><o:p></o:p></p></td></tr>
</tbody></table>





</body>
</html>

I appreciate there may be a lot of redundant code, but that was me trying to stop the formatting issues in any way I could think of, so if anyone can test this out and provide new code to fix the issue that would be amazing.

Upvotes: -1

Views: 33

Answers (0)

Related Questions