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

HTML Styling for 2 x HTML table outputs

Hi All,

 

I have a Flow that filters some SharePoint data into two different HTML tables.

 

I have a send email that has both HTML tables in the body.

 

I would like to style the two different HTML tables differently.

 

I tried adding divs, but the styling didn't apply to the tables.

 

Is this possible?

 

Attached is my Send email function - I can style the tables the same, but would like the "overdue" div to appear in red.

 

MS_Flow.jpg

Thanks,

Roy

1 ACCEPTED SOLUTION

Accepted Solutions
Community Support
Community Support

Hi @roy_t,

 

Could you please share a full screenshot of your flow's configuration?

Do you want to style the HTML table within the "overdue" div as red?

 

I agree with @Sru's thought almost. If you want to style the HTML table within the "overdue" div as red, I think there is something wrong with the CSS style within the Body field of your "Send an email" action.

 

I have made a test on my side and please take a try with the following workaround:8.JPG

Within Body field of the "Send an email" action, type the following CSS style:

 

<style>
#overdue table {
background-color: #FF0000;
}
</style>

The Is HTML field set to Yes.

 

 

The flow works successfully as below:9.JPG

 

10.JPG

 

 

Best regards,

Kris

 

Community Support Team _ Kris Dai
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

View solution in original post

8 REPLIES 8
Advocate IV
Advocate IV

hi @roy_t

 

By adding a separate class to each table i am able to apply styling to each tables.

 

Thanks,

Sru

html1.PNG

 


html2.PNG

Regular Visitor

Thanks for the suggestion Sru.

 

This works fine if I want to create my own table, but doesn't seem to work for an HTML table that was created using the "Create HTML table" node.

 

Do you know if it's possible to apply individual styles to a "Create HTML table" output?

 

Cheers,

Roy

Community Support
Community Support

Hi @roy_t,

 

Could you please share a full screenshot of your flow's configuration?

Do you want to style the HTML table within the "overdue" div as red?

 

I agree with @Sru's thought almost. If you want to style the HTML table within the "overdue" div as red, I think there is something wrong with the CSS style within the Body field of your "Send an email" action.

 

I have made a test on my side and please take a try with the following workaround:8.JPG

Within Body field of the "Send an email" action, type the following CSS style:

 

<style>
#overdue table {
background-color: #FF0000;
}
</style>

The Is HTML field set to Yes.

 

 

The flow works successfully as below:9.JPG

 

10.JPG

 

 

Best regards,

Kris

 

Community Support Team _ Kris Dai
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

View solution in original post

That's got it!

 

Thanks @v-xida-msft and @Sru for your help.

I think this gives me some insight to the problem I want to solve.  I created a HTML table and I want the output email to show teh table with borders.  Can this be done by using <style> and <div>

OK solved this by adding a second compose "data operations compose" and used the following syntax

 

replace(body('Create_HTML_table'),'<table>','<table border="1">')

 

Where 'Create_HTML_table' = the name of the Create HTML compse

Anonymous
Not applicable

For an HTML table we are using we can style the thead area with color as follows - as its a thead you can actually style that element, but you can style its components. Although I can't get the font to change yet.

 

i also had to put my output into a div called thetable so my styles didnt mess with other tables in the email - eg signature.

 

<style>
table {
border-collapse: collapse;
padding: 5px;
font-face: Arial;
}
#thetable table, #thetable th, #thetable td {
border: 1px solid black;
}
thead th
{
background-color: #2E77BB;
color:#FFFFFF;
text-align:left ;
font:arial, sans-serif;
}

</style>

Helper IV
Helper IV

Hi 

In my scenario,

 

I am writing code for print form option.

Step1: I wrote a HTML code  for my application

Step2: I used this code on MS FLow 

  • first i'm calling powerapps
  • Prase JSON
  • Comple(HTML Code with parse JSON values added)
  • respond to powerapps
  • Creating an html file

Step3: after creating the flow. I was calling flow from powerapps

step4: Now i was able to get data into the html with flow

 

On my powerapps, based on dropdown select all the other feilds will populate, I'm unable to hide feilds based on dropdown selected value on HTMl.

is there any way to hide labels based on selected value on HTML

Helpful resources

Announcements
PP Bootcamp Carousel

Global Power Platform Bootcamp

Dive into the Power Platform stack with hands-on sessions and labs, virtually delivered to you by experts and community leaders.

secondImage

Power Platform Community Conference On Demand

Watch Nick Doelman's session from the 2020 Power Platform Community Conference on demand!

MPA Community Blog

Power Automate Community Blog

Check out the community blog page where you can find valuable learning material from community and product team members!

Users online (4,533)