HTML TABLE

[Anonymous]

Hi ,

I have applied HTML formatting to a table in a Microsoft 365 - Send an Email (v2) through a Compose element. The table is formatted the way I would like but it is also formatting my email signature into a table. Any tips?

<style>
table {
border: 1px solid #CCCCCC; /* grey */
background-color: #F5F5F5; /* light grey */
width: 100%;
text-align: left;
border-collapse: collapse;
}
table td, table th {
border: 1px solid #AAAAAA;
padding: 3px 2px;
color: #333333; /* dark grey */
}
table tbody td {
font-size: 13px;
}
table thead {
background: #FFA500; /* orange */
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>

 could any one please help to fix this issue

[Chriddle]

Add a CSS class name to your table and extend your styles accordingly.

[Anonymous]

Hi ,

Could u please be detail on how to add  CSS Class Name  

[Chriddle]

In the styles, replace all occurences  of table with table.your-class-name

<style>
table.your-class-name {

 in the HTML, add this classname to the table tag.

<table class="your-class-name">

[LucyP36]

Hello,

I'm having the same problem as the original poster.

Are you able to give me a little more in depth information on how/where to add the naming's you have suggested?

I've attached images for the html email, and the style, which is using the output from the Create HTML table step before it. I've spent hours today trying to get it to stop subsequently also formatting my signature and I'm getting nowhere. Your help would be greatly appreciated!

[Chriddle]

If you provide me the generated HTML (preferable in a "Code sample" box), I can probably help you.

[LucyP36]

Thank you, that would be greatly appreciated - thank you for the prompt reply, i'm sorry its been a few days i went on holiday

Here is what the flow spits out once the flow is complete;

<p>Hello,<br>
<br>
Please see below your automated reminder for today<br>
<br>
<style>
div {
table {
border: 1px solid #1C6EA4;
background-color: #EEEEEE;
width: 60%;
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: yellow
border-bottom: 2px solid #444444;
}
table thead th {
font-size: 15px;
font-weight: bold;
color: black
border-left: 2px solid #D0E4F5;
}
table thead th:first-child {
border-left: none;
}
div}
</style>
<table><thead><tr><th>Due Date</th><th>Reminder</th></tr></thead><tbody><tr><td>16-10-2023</td><td>Ignore. Lucy is just messing around with Power Automate, she hopes you are having a nice day!</td></tr></tbody></table><br>
<br>
Best wishes,<br>
Lucy</p>

[Chriddle]

Compose "MyTableStyles": Each table selector has an additionally class selector "mytable"

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

 Compose "Table"

<table><thead><tr><th>Due Date</th><th>Reminder</th></tr></thead><tbody><tr><td>16-10-2023</td><td>Ignore. Lucy is just messing around with Power Automate, she hopes you are having a nice day!</td></tr></tbody></table>

Compose "MyTable": An additional classname "mytable" is added

replace(outputs('Table'),'<table>', '<table class="mytable">')

 Send an email (V2): I like to edit the body in Code Viw to have full controll over the HTML

The outputs of MytableStyles and MyTable

Plus an extra table to show that this is not affected by the styles anymore.

Unfortunately, I forgot that Outlook handles the signature separator strangely😄

The result look like this in an email:

[LucyP36]

great! thank you so much for your help.