web
You’re offline. This is a read only version of the page.
close
Skip to main content

Announcements

Welcome to the Power Platform Communities
News and Announcements icon
Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Automate / How to fix the issue o...
Power Automate
Answered

How to fix the issue of compose action of HTML table

(0) ShareShare
ReportReport
Posted on by MIA27 2

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.

 

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

 

 

MIA27_0-1719078865706.png

 

 

 

 

Categories:
Building flows
I have the same question (0)
  • Verified answer
    Ellis Karim Profile Picture
    Ellis Karim 11,940 Super User 2026 Season 1 on at

    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">
 <!-- Your table contents -->
</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>

     

     

     

     

    2024-06-23_00-37-24.PNG

     

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

    2024-06-23_00-41-24.PNG

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

    2024-06-23_00-42-31.PNG

    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

  • MIA27 Profile Picture
    MIA27 2 on at

    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.

     

    MIA27_3-1719122884720.png

     

    MIA27_4-1719122965579.png

     

     

    Result is as below :

     

    MIA27_5-1719123131698.png

     

     

     

     

  • MIA27 Profile Picture
    MIA27 2 on at

    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.

     

     

  • MIA27 Profile Picture
    MIA27 2 on at

    Was expecting your advise.

    Please guide to correct the mistake

     

     

  • MIA27 Profile Picture
    MIA27 2 on at
    Dear Mr. Karim, Was expecting your advise, Can you correct my code.
  • Suggested answer
    Ellis Karim Profile Picture
    Ellis Karim 11,940 Super User 2026 Season 1 on at

    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:

    2024-06-23_00-37-24.PNG

     

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

    2024-06-28_15-43-33.PNG

     

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

    2023-12-30_20-25-24.PNG

    Here are the table styling code:

    2024-06-28_15-44-30.PNG

    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:

    2024-06-28_15-46-55.PNG

    Filter Array:

    2024-06-28_15-48-41.PNG

    Create HTML Table:

    2024-06-28_15-50-08.PNG

    Compose action:

     

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

     

    2024-06-28_15-51-44.PNG

    This is the Send Mail action:

    2024-06-23_00-37-24.PNG

    This is the sample runtime output:

    2024-06-28_15-58-01.PNG

     

    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...
  • MIA27 Profile Picture
    MIA27 2 on at

    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

    MIA27_0-1719601772474.png

     

     

    Below is the result in the new window:

    MIA27_1-1719601847122.png

     

     

    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.

     

     

     

     

     

     

     

     

  • Ellis Karim Profile Picture
    Ellis Karim 11,940 Super User 2026 Season 1 on at

    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:

    2024-06-28_20-53-38.PNG

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

    2024-06-28_20-53-50.PNG

    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

     

     

  • MIA27 Profile Picture
    MIA27 2 on at

    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)

    MIA27_0-1719637455730.png

    MIA27_2-1719639057211.png

     

     

     

    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):

    MIA27_1-1719637546137.png

    MIA27_3-1719639097589.png

     

    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.

     

     

     

     

     

  • laclws Profile Picture
    laclws 45 on at
    Hi MIA27,
     
    Have you solved your HTML style problem? I encounter similar problem as yours. the HTML table format or style is showing in outlook new window but it is not showing in the outlook preview mode. 

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

News and Announcements

Welcome to the Power Platform Communities

Quick Links

Introducing the 2026 Season 1 community Super Users

Congratulations to our 2026 Super Users!

Kudos to our 2025 Community Spotlight Honorees

Congratulations to our 2025 community superstars!

Congratulations to the February Top 10 Community Leaders!

These are the community rock stars!

Leaderboard > Power Automate

#1
Haque Profile Picture

Haque 286

#2
David_MA Profile Picture

David_MA 256 Super User 2026 Season 1

#3
Expiscornovus Profile Picture

Expiscornovus 225 Most Valuable Professional

Last 30 days Overall leaderboard

Featured topics

Share your ideas and struggles with building Power Automate flows!
Survey: Power Automate mobile app
How to Ask for Help with Your Power Automate Workflow
Flows are not visible for users who sign in with their personal accounts
Start and wait for an approval action
Restore a deleted flow
List of actions cheat sheet for Power Automate Desktop
Question for everyone : How are you using Create Text GPT in AI Builder?
Welcome to the Power Automate forum!

Product updates

Microsoft Power Platform Community release plans