Formatting multiple HTML Tables for Email

[mr-samd]

Hi, 

I am relatively new to HTML tables and the formatting of them. 

I have an email that has 3 different HTML tables in. I have the following style added to each of them (copied from an online tutorial and edited to be what i would like)...

<style>
table {
  border: 1px solid #009ede;
  background-color: #Ffffff;
  width: 50%;
  text-align: centre;
  border-collapse: collapse;
}
table td, table th {
  border: 1px solid #009ede;
  padding: 1px;
  text-align: centre;
}
table tbody td {
  font-size: 15px;
}
table thead {
  background: #009ede;
  border-bottom: 1px solid #009ede;
}
table thead th {
  font-size: 15px;
  font-weight: bold;
  color: #Ffffff;
  border-left: 1px solid #009ede;
}
table thead th:first-child {
  border-left: none;
}
</style>

This in general gives what I want but have noticed some quirks that i dont know how to solve.

1. When the second HTML gets added, it looks different to the first

It has the same style formatting as the first. The third is also normal.

2. When it is added to the email there are large spaces above and below each HTML table (see above) even though these are not in the flow . Can I make these gaps smaller?

Any help is much appreciated!

[srApps]

Does the 2nd table have any inline style being applied?

[mr-samd]

For each table just have the compose with the code above followed by the output of the HTML table. See picture above. All tables are made exactly the same. 

[srApps]

Can you view a previous Flow run and look at the send email action inputs body and copy/paste it here (redact what is not needed)? It should show all the HTML and may help figure out what is happening. Also, you only need to put the style compose in the email once, not for every table. I don't think that would cause this, but would shorten the input.

[mr-samd]

<p><span style="font-size: 16px"><strong>Weekly Quality Report<br>
</strong></span><span style="font-size: 12px">Hello,</span><span style="font-size: 16px"><br>
</span><span style="font-size: 12px">Here is an overvue of all open reports for each team:</span><span style="font-size: 12px"><strong><br>
</strong></span><a href="Sharepoint URL"><span style="font-size: 14px"><strong>AF:</strong></span></a><br>
<style>
table {
  border: 1px solid #009ede;
  background-color: #Ffffff;
  width: 50%;
  text-align: center;
  border-collapse: collapse;
}
table td, table th {
  border: 1px solid #009ede;
  padding: 1px;
  text-align: center;
}
table tbody td {
  font-size: 15px;
}
table thead {
  background: #009ede;
  border-bottom: 1px solid #009ede;
}
table thead th {
  font-size: 15px;
  font-weight: bold;
  color: #Ffffff;
  border-left: 1px solid #009ede;
}
table thead th:first-child {
  border-left: none;
}
</style><br>
<table><thead><tr><th>Department</th><th>Pending</th><th>Overdue</th><th>Total</th></tr></thead><tbody><tr><td>Team 1</td><td>0</td><td>12</td><td>12</td></tr><tr><td>Team 2</td><td>0</td><td>3</td><td>3</td></tr><tr><td>Team 3</td><td>0</td><td>0</td><td>0</td></tr><tr><td>Team 4</td><td>0</td><td>3</td><td>3</td></tr><tr><td>Team 5</td><td>0</td><td>5</td><td>5</td></tr><tr><td>Team 6</td><td>0</td><td>4</td><td>4</td></tr></tbody></table><br>
<a href="Sharepoint URL"><span style="font-size: 14px"><strong>NCRs:</strong></span></a><br>
<style>
table {
  border: 1px solid #009ede;
  background-color: #Ffffff;
  width: 50%;
  text-align: center;
  border-collapse: collapse;
}
table td, table th {
  border: 1px solid #009ede;
  padding: 1px;
  text-align: center;
}
table tbody td {
  font-size: 15px;
}
table thead {
  background: #009ede;
  border-bottom: 1px solid #009ede;
}
table thead th {
  font-size: 15px;
  font-weight: bold;
  color: #Ffffff;
  border-left: 1px solid #009ede;
}
table thead th:first-child {
  border-left: none;
}
</style><br>
<table><thead><tr><th>Department</th><th>Pending</th><th>Overdue</th><th>Total</th></tr></thead><tbody><tr><td>Team 1</td><td>0</td><td>5</td><td>5</td></tr><tr><td>Team 2</td><td>0</td><td>3</td><td>3</td></tr><tr><td>Team 3</td><td>0</td><td>0</td><td>0</td></tr><tr><td>Team 4</td><td>0</td><td>0</td><td>0</td></tr><tr><td>Team 5</td><td>0</td><td>1</td><td>1</td></tr><tr><td>Team 6</td><td>0</td><td>0</td><td>0</td></tr></tbody></table><br>
<a href="Sharepoint URL"><span style="font-size: 14px"><strong>QCFs:<br>
</strong></span></a><style>
table {
  border: 1px solid #009ede;
  background-color: #Ffffff;
  width: 50%;
  text-align: center;
  border-collapse: collapse;
}
table td, table th {
  border: 1px solid #009ede;
  padding: 1px;
  text-align: center;
}
table tbody td {
  font-size: 15px;
}
table thead {
  background: #009ede;
  border-bottom: 1px solid #009ede;
}
table thead th {
  font-size: 15px;
  font-weight: bold;
  color: #Ffffff;
  border-left: 1px solid #009ede;
}
table thead th:first-child {
  border-left: none;
}
</style><br>
<table><thead><tr><th>Department</th><th>Pending</th><th>Overdue</th><th>Total</th></tr></thead><tbody><tr><td>Team 1</td><td>0</td><td>4</td><td>4</td></tr><tr><td>Team 2</td><td>0</td><td>0</td><td>0</td></tr><tr><td>Team 3</td><td>0</td><td>0</td><td>0</td></tr><tr><td>Team 4</td><td>0</td><td>0</td><td>0</td></tr><tr><td>Team 5</td><td>0</td><td>1</td><td>1</td></tr><tr><td>Team 6</td><td>0</td><td>2</td><td>2</td></tr></tbody></table><br>
 If any reports or findings are ready for review, please contact a member of the team.<br>
<br>
Best regards,<br>
Quality team</p>

[srApps · Accepted solution]

I copy/pasted that into a compose action and emailed it to myself. In OWA it looked normal, but in the Outlook desktop app it had the spacing in the second table. I then tried with only using the style compose once (instead of before each table) and the tables all looked correct in Outlook. Try only using the compose action with the stylying one time in the email body. Weird Outlook bug I guess or HTML doing weird things when styles are declared more than once?

[mr-samd]

Thanks! This has worked. 

I wasn't aware that I only needed to add the style once and although I don't know why the table is different with multiple, it is fixed now there is only one!