Format HTML table with dynamic data when number of rows changes

[AdamW]

I need to send 10,000 emails that contain dynamic data.  I have created a flow using the "Create HTML Table" action.  The problem is that the formatting looks terrible.  All of the options that I see out there require the number of rows to be static in order to apply the formatting properly.  These emails will have rows that range anywhere from 2 rows to 200 rows.  What are my options to do this?

[Mira_Ghaly · Accepted solution]

Hi @AdamW 

You can apply style to your HTML table 

1. You need to give your HTML Table an ID

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

2. Add your preferred style as a compose data operation like below: replace #contactsTable with your table id

3. Concatenate the style with the HTML table prior to sending in a compose data operation and use the  output of the compose data operation in your email

concat(outputs('Style'),outputs('Replace_Table_With_ID'))

Hope this works for you!

[AdamW]

This is certainly the easiest explanation I have seen so thank you!.  The only problem is that I don't understand how I give the table an ID.  I am using divtable.com to generate the style.

[Mira_Ghaly]

@AdamW 

To Give a table an ID you need to add a compose data operation with Replace Expression as below:

replace(body('Create_HTML_table'),'<table>','<table id=myTable>') ; This gives the output table of your Create HTML table an id called myTable

Lets say you have the below CSS style generated from divtable, In notepad or any word editor you can replace table.greenTable with #myTable .. I hope this is what you are looking for 🙂

table.greenTable {
font-family: Georgia, serif;
border: 6px solid #24943A;
background-color: #D4EED1;
width: 100%;
text-align: center;
}
table.greenTable td, table.greenTable th {
border: 1px solid #24943A;
padding: 3px 2px;
}
table.greenTable tbody td {
font-size: 13px;
}
table.greenTable thead {
background: #24943A;
background: -moz-linear-gradient(top, #5baf6b 0%, #3a9e4d 66%, #24943A 100%);
background: -webkit-linear-gradient(top, #5baf6b 0%, #3a9e4d 66%, #24943A 100%);
background: linear-gradient(to bottom, #5baf6b 0%, #3a9e4d 66%, #24943A 100%);
border-bottom: 0px solid #444444;
}
table.greenTable thead th {
font-size: 19px;
font-weight: bold;
color: #F0F0F0;
text-align: left;
border-left: 2px solid #24943A;
}
table.greenTable thead th:first-child {
border-left: none;
}

table.greenTable tfoot {
font-size: 13px;
font-weight: bold;
color: #F0F0F0;
background: #24943A;
background: -moz-linear-gradient(top, #5baf6b 0%, #3a9e4d 66%, #24943A 100%);
background: -webkit-linear-gradient(top, #5baf6b 0%, #3a9e4d 66%, #24943A 100%);
background: linear-gradient(to bottom, #5baf6b 0%, #3a9e4d 66%, #24943A 100%);
border-top: 1px solid #24943A;
}
table.greenTable tfoot td {
font-size: 13px;
}
table.greenTable tfoot .links {
text-align: right;
}
table.greenTable tfoot .links a{
display: inline-block;
background: #FFFFFF;
color: #24943A;
padding: 2px 8px;
border-radius: 5px;
}

[AdamW]

Nevermind!  I figured it out!