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

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!

firstImage

Incoming: New and improved badges!

We've given our badges an overhaul and also added some brand new ones!

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 Power Automate Community Video Gallery!

Top Solution Authors
Top Kudoed Authors (Last 30 Days)
Users online (4,746)