cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
toribird1992
Level: Powered On

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>

 

3 REPLIES 3
Community Support Team
Community Support Team

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
Level: Powered On

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
Level: Powered On

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. 

Helpful resources

Announcements
firstImage

Microsoft Business Applications Virtual Launch Event

Join us for an in-depth look at the new innovations across Dynamics 365 and the Microsoft Power Platform.

firstImage

Watch Sessions On Demand!

Continue your learning in our online communities.

Power Platform 2019 Release Wave 2 Plan

Power Platform 2019 Release Wave 2 Plan

Features releasing from October 2019 through March 2020

thirdimage

Flow Community User Group Member Badge

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

fifthimage

Microsoft Learn

Learn how to build the business apps that you need

sixthImage

Power Platform World Tour

Find out where you can attend!

seventhimage

Webinars & Video Gallery

Watch & learn from the Flow Community Video Gallery!

Top Kudoed Authors
Users Online
Currently online: 47 members 4,809 guests
Please welcome our newest community members: