How to fix the issue of compose action of HTML table

(0) Share

Report

Posted on by MIA27

I made html table for which I added a compose action.

Below is the compose code. In the email, I put the compose output first and then html output.

All is working fine, but the compose styling is not only limited to the table, it is affecting below than that, as can be seen in the picture pasted that my signature section of the email is also been affected the stlye.

Please advise, what changes to be done to the below compose style code, so that the style code effect get limited to only the html table. Not after that.

Categories:

Building flows

I have the same question (0)

All responses (9)

Answers (0)

Ellis Karim 11,691 Super User 2025 Season 2 on at

Like (0)

Report
Hi @MIA27 ,

You can try the following. Add a class or an id to your first table and then adjust the CSS to target that class or id.

Add an id to your first table, for example id="table1" :

<table id="table1">  </table>

I've used the replace function to add a table id:

replace(body('Create_HTML_table'),'<table>','<table id="table1">')

Modify the CSS to target only the table with id="table1":

<style> #table1 { border: 1px solid #1C6EA4; background-color: #EEEEEE; width: 100%; text-align: left; border-collapse: collapse; } #table1 td, #table1 th { border: 1px solid #AAAAAA; padding: 3px 2px; } #table1 tbody td { font-size: 13px; } #table1 thead { background: #1C6EA4; border-bottom: 2px solid #444444; } #table1 thead th { font-size: 15px; font-weight: bold; color: #FFFFFF; border-left: 2px solid #D0E4F5; } #table1 thead th:first-child { border-left: none; } </style>

Sample Outlook email showing two HTML tables using two different styles:

I didn't use an id for the second table, and the CSS code for this green table doesn't include an id:

You can use ChatGPT to help generate the CSS code.

Hope this helps.

Ellis
____________________________________
If I have answered your question, please mark the post as ☑️ Solved.
If you like my response, please give it a Thumbs Up.
My Blog Site

Was this reply helpful? Yes No
MIA27 2 on at

Like (0)

Report

Mr. Karim ,
Thank you for your so detail reply, which will help me learn and implement it.

I applied the method you mentioned, But it fails, The table is not getting formatted like border, header color etc, simply data, I dont know what mistake I am making, I am using outlook. Below is the step I took, Kindly check and guide me the correction.

Step1:
I declared an ID to the table as you guided.
Secondly add another action of compose, and copied the code you provided and pasted it.
then in the email, I the put the compose style first and then compose TableId out next.
Result can be seen in the below image.

Result is as below :

Was this reply helpful? Yes No
MIA27 2 on at

Like (0)

Report

Dear Mr. Karim,

Could you please advise on the latest update,
Requesting you kindly check the process I followed as per your advise,
where is the mistake I making.

Was this reply helpful? Yes No
MIA27 2 on at

Like (0)

Report

Was expecting your advise.
Please guide to correct the mistake

Was this reply helpful? Yes No
MIA27 2 on at

Like (0)

Report

Dear Mr. Karim, Was expecting your advise, Can you correct my code.

Was this reply helpful? Yes No
Ellis Karim 11,691 Super User 2025 Season 2 on at

Like (1)

Report
Hi @MIA27 ,

Sorry for the late response. Seemed to have missed the notifications.

Note the ordering of the Table code below. HTML Table Styling code FIRST, then the HTML table SECOND:

Here is a fully working demo, along with the Excel file I used. You can try this simple flow if you are getting stuck:

Note about the Select action, witch to text mode first as shown below:

Here are the table styling code:

Compose HTML Table Style

<style> #table1 { border: 1px solid #1C6EA4; background-color: #EEEEEE; width: 100%; text-align: left; border-collapse: collapse; } #table1 td, #table1 th { border: 1px solid #AAAAAA; padding: 3px 2px; } #table1 tbody td { font-size: 13px; } #table1 thead { background: #1C6EA4; border-bottom: 2px solid #444444; } #table1 thead th { font-size: 15px; font-weight: bold; color: #FFFFFF; border-left: 2px solid #D0E4F5; } #table1 thead th:first-child { border-left: none; } </style>

Compose HTML Table Style Green

<style> table { border: 1px solid #34A853; /* A vibrant green for the outer border */ background-color: #E6F4EA; /* Light green for the background */ width: 100%; text-align: left; border-collapse: collapse; } table td, table th { border: 1px solid #A2D9B1; /* Softer green for the cell borders */ padding: 3px 2px; } table tbody td { font-size: 13px; color: #246824; /* Dark green for text to ensure readability */ } table thead { background: #34A853; /* Darker green for the header background */ border-bottom: 2px solid #1C6946; /* Deep green for the bottom border of the header */ } table thead th { font-size: 15px; font-weight: bold; color: #FFFFFF; /* White text for contrast */ border-left: 2px solid #A2D9B1; /* Lighter green for separation within the header */ } table thead th:first-child { border-left: none; } </style>

Apply to each loop:

Filter Array:

Create HTML Table:

Compose action:

replace(body('Create_HTML_table'),'<table>','<table id="table1">')

This is the Send Mail action:

This is the sample runtime output:

Please let me know how you get on, and post any screenshots of the outputs.

Ellis
____________________________________
If I have answered your question, please mark the post as ☑️ Solved.
If you like my response, please give it a Thumbs Up.
My Blog Site

PassFail.xlsx

DemoFlow-Tableand...

Was this reply helpful? Yes No
MIA27 2 on at

Like (0)

Report
Thank you Sir for your time and details learning reply.

It worked but still one issue remains.

First Please note below changes made it worked, i don't know if it was the reason:
a) I made the style compose in action sequence before and then html table compose.
b) just copied from your last posting the below line and paste again :
replace(body('Create_HTML_table'),'<table>','<table id="table1">')
as had a earlier experience due a space it was not working and was no error.

Now the result in two scenario
Below is the result when in the message view of outlook

Below is the result in the new window:

Now , cannot understand, in new windows it is working fine, but message window it is showing just a box.

Tried to change width percent to 75%, to check it works, still the same issue,
change font etc, nothing worked, still remains same, message window, no formatting but window has proper formatting of the table,

Any idea how to fix this.

Was this reply helpful? Yes No
Ellis Karim 11,691 Super User 2025 Season 2 on at

Like (0)

Report

Hi @MIA27 ,

I'm not sure I understand but I think you are reporting something similar to the following:

Here is the email with two HTML tables:

When I forward this message, the tables and other formatting look different to the original:

I think that the problem lies with they way Outlook interprets and renders HTML emails?

Ellis
____________________________________
If I have answered your question, please mark the post as ☑️ Solved.
If you like my response, please give it a Thumbs Up.
My Blog Site

Was this reply helpful? Yes No
MIA27 2 on at

Like (0)

Report
Exactly, the problem is the same as you understood, but in another way.

In my situation, When I receive the Email on the trigger from the power app, I get to see the below format: (This is what I have reported/shown you in the first image, as also in your image)

But when I open the outlook that particular email in a new window by Pressing (Alt and Double click together), the email table format is perfect as below (Your can refer to my second image):

Is there any way to fix this.

My experience earlier have seen if used By the method Replace(Replace.......), it remains the same in the message screen or separate window (i mean the format does not change), But the question remains that Formatting is very limited in this expression method.

Is it possible to call in the replace method like below :
replace(body('Create_HTML_table'),'<table>','<Style="Compose HTML Table Style">')
I am trying to say, that in the Replace method, Can we call the compose style directly in the Replace.

Please guide.

Was this reply helpful? Yes No