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
v-yamao-msft
Community Support
Community Support

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.

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. 

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. 

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
MPA User Group

Welcome to the User Group Public Preview

Check out new user group experience and if you are a leader please create your group

MBAS on Demand

Microsoft Business Applications Summit sessions

On-demand access to all the great content presented by the product teams and community members! #MSBizAppsSummit #CommunityRocks

MBAS Attendee Badge

Claim Your Badge & Digital Swag!

Check out how to claim yours today!

secondImage

Are Your Ready?

Test your skills now with the Cloud Skill Challenge.

Top Solution Authors
Users online (66,446)