cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
toribird1992
Regular Visitor

Alternate rows in html table not showing fill color.

So I have a flow that when a new item is created in a list it triggers a parallel flow that sends an email to the department that will process the request and a confirmation email sent to the user who submitted the request. 

In the email sent to processing, I have the data collected into a vertical table. However the syle code tr:nth-child(even) {background-color: #00B5E2;} isn't working in the flow. The flow does complete but in the email received all the rows are the same color. If I put the full code into an HTML Editor It works. Any ideas why this is? Ive included the full html below. 

=======================

<html>
<head>
<style>
           table, th, td { font-family: arial, sans-serif;
                                 border: 1px solid #75787B;
                                 border-collapse: collapse; }
           th, td { padding: 5px;
                      text-align: left;
                      border: 2.5px solid #75787B; }

           tr:nth-child(even) {background-color: #00B5E2 ;}
</style>

</head>
<body>

             <p>enter paraghraph here</p>

                       <h2>Questionnnaire Tile</h2>

                               <table>
                                      <caption>Enter caption here</caption>
                                               <tr>
                                                     <th>Question 1</th>
                                                     <td>Question one Value× </td>
                                                                                                        </tr>
                                               <tr>
                                                     <th>Question 2</th>
                                                     <td>Question 2× </td>
                                                                                              </tr>

                                              <tr>

                                                      <th>Question 3</th>
                                                      <td>Question 3× </td>
                                                                                             </tr>

                              </table>

</body>
</html>

 

4 REPLIES 4
Community Support
Community Support

Re: Alternate rows in html table not showing fill color.

Hi @toribird1992,

 

I have made another test with the following example code, then a background color for the HTML doc will be displayed as expected.

<html>
<body bgcolor="#E6E6FA">
<h1>Hello world!</h1>
<p><a href="https://www.w3schools.com">Visit W3Schools.com!</a></p>
</body>
</html>

1.PNG

Please take it for a reference and check the HTML code and try again.

 

Best regards,

Mabel

Community Support Team _ Mabel Mao
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.
toribird1992
Regular Visitor

Re: Alternate rows in html table not showing fill color.

Using your example I was able to get the entire email body to have a color block but still unable to get every other row to have a filled background. The flow email HTML doesn't recognize the tag tr:nth-child(even). If I change the row tag from tr to th, td the entire table has the color chosen color grey which tells me it's ignoring the nth-child(even) part. I even tried changing the child to odd.  Does Microsoft Flow email not use HTML5? Is there another tag I could use? I realize it may be a CSS issue not HTML since its a style bit. 

cg4life09 Advocate I
Advocate I

Re: Alternate rows in html table not showing fill color.

Was there ever any followup to this?

 

I am having a similar issue with nth-child(4) being ignored. All other styling works fine. I am wondering if this is Flow not recognizing nth-child items. 

Runner55552 Advocate II
Advocate II

Re: Alternate rows in html table not showing fill color.

I think Outlook simply doesn't recognize the nth-child css code. 
An online post commented on this, and the workaround is to use an if statement and a row counter in a loop (with the Mod function) to keep track of whether you're in an even or odd row, then format each with different background colors.  Fairly complex workaround, but I think it would work.

 

 

https://ryanmaclean365.com/2020/01/29/power-automate-html-table-styling/

 

part of his code below, remainder at link above: 

“if(equals(mod(variables(‘RowNumber’),2),0),’#ffffff’,’#e1e1e1′)”
This works by using the MOD expression to check if the RowNumber variable is divisible by 2. The MOD expression returns the remainder from dividing two numbers. If this equals zero we know we’re on an even row, while if it returns any value other than zero we’re on an odd row. We can then use the IFTRUE and IFFALSE to set alternating row colours.

Helpful resources

Announcements
Did you attend MBAS? Claim your badge

Attending MBAS? Claim your badge

Whether you’ve streamed the digital event live, or you're watching on-demand, claim your attendee badge to sport on your profile.

MBAS Gallery 2020

MBAS Gallery 2020

Watch Microsoft Business Applications Summit sessions on-demand.

firstImage

New Ranks and Rank Icons released on April 21!

The time has come: We are finally able to share more details on the brand-new ranks coming to the Power Automate Community!

firstImage

Now Live: Power Virtual Agents Community!

We are excited to announce the launch of Power Virtual Agents Community. Check it out now!

firstImage

New & Improved Power Automate Community Cookbook

We've updated and improved the layout and uploading format of the Power Automate Cookbook!

thirdimage

Power Automate Community User Group Member Badge

Fill out a quick form to claim your user group badge now!

sixthImage

Community Summit North America

The top training and networking event across the globe for Microsoft Business Applications

Top Solution Authors
Users online (6,029)