How to change last row formatting in table with CSS for email

[lardo5150]

My flow is grabbing rows from an SPO List.

It is also calculating totals of those rows.

<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;
}
table tr:last-child {
  font-weight: bold;
}
</style>

I have tried every combination possible to make the last row of the table different.

Background color, bold, etc.  It never changes.  It stays the same as the rest.

i also tried to do alternating rows different colors, but that also did not work.

The above formula does produce a colored header, but other than that i can't get any other formatting to work.

Can anyone help me with two things.

1.  Alternating row colors

2. last row either just bold or bold and a completely different color.

[ArchitectMadhan]

Hi  ,Try the below code for setting the background color the last row in the table. you need to mention the table id in html. like table id="mytable", you are having a tag "tfootop" instead you could have had "tbody", there is no closing tag for "tr" in html table construction place. 

mytable > tbody > tr:last-child { background:#ff0000; }

 

2. To set alternate color in the table, check this link.

[lardo5150]

Still the same.

I grabbed the output from the last run.  I removed all the data in between.

<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;
}
table tr:last-child {
  background:#33EEEB;
}
</style>
<table><thead><tr><th>Engineer</th><th>Total Assigned</th><th>Crits Assigned</th><th>Non-Crits Assigned</th><th>POCs Assigned</th><th>B 24x7 Assigned</th><th>B Assigned</th><th>C Assigned</th><th>SEV 1 Assigned</th><th>SIE Assigned</th></tr></thead><tbody><tr></td></tr></tbody><tfootop>
<tr>
<td>TOTAL</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td></tr>
</tfootop>
</table>

[lardo5150]

<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;
}
table tfootop tr:last-child {
  background:#33EEEB;
}
</style>

even tried this with the tfootop (you can see in the construction in the above posts that I called it tfootop).

[ArchitectMadhan]

Hi @lardo5150 ,

Here is the Table I have used. I have removed the "tfootop".

<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;
}
table> tbody> tr:last-child {
background:#33EEEB;
}
</style>

<table><thead><tr><th>Engineer</th><th>Total Assigned</th><th>Crits Assigned</th><th>Non-Crits Assigned</th><th>POCs Assigned</th><th>B 24x7 Assigned</th><th>B Assigned</th><th>C Assigned</th><th>SEV 1 Assigned</th><th>SIE Assigned</th></tr></thead><tbody><tr><td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td></tr><tr><td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td></tr>
<tr>
<td>TOTAL</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td></tr>
</tbody>
</table>

Output:

[lardo5150]

ok, i think I understand now what is happening.

@ArchitectMadhan do you know how to properly split the table at </tbody> so that I can then add the total rows to match what you have?

Right now i am splitting at </table>, so the </tbody> is not covering the Totals piece.

[lardo5150]

I was able to figure out the split part.  But the last row is still not filling in.

Here is what I have:

on the compose where I combine the table with the CSS Style, right before we send the email, here is the output with some data removed:

<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;
}
table> tbody> tr:last-child {
background:#33EEEB;
}
</style>
<table><thead><tr><th>Engineer</th><th>Total Assigned</th><th>Crits Assigned</th><th>Non-Crits Assigned</th><th>POCs Assigned</th><th>B 24x7 Assigned</th><th>B Assigned</th><th>C Assigned</th><th>SEV 1 Assigned</th><th>SIE Assigned</th></tr></thead><tbody><tr><td></td></tr><tr>
<td>TOTAL</td>
<td>4</td>
<td>1</td>
<td>2</td>
<td>0</td>
<td>0</td>
<td>1</td>
<td>0</td>
<td>0</td>
<td>0</td></tr>
</tbody>
</table>

[lardo5150]

I even tried to change the last piece from:

table> tbody> tr:last-child {
background:#33EEEB;
}

to:

table tbody tr:last-child {
background:#33EEEB;
}

Same result, no color on the last row.

[ArchitectMadhan]

Hi @lardo5150 ,

The output of you table is shown below, basically table is not formed properly, as you see there are 10 td (Columns) in the last row, whereas your first row, next to the header has only one td (column). Please use the table which I sent as a reference.

Output of your table:

[lardo5150]

@ArchitectMadhan sorry, I have the same, when I removed my data, i did it wrong.

Here is what I actually have:

<table><thead><tr><th>Engineer</th><th>Total Assigned</th><th>Crits Assigned</th><th>Non-Crits Assigned</th><th>POCs Assigned</th><th>B 24x7 Assigned</th><th>B Assigned</th><th>C Assigned</th><th>SEV 1 Assigned</th><th>SIE Assigned</th></tr></thead><tbody><tr><td>John Doe</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr>
<td>TOTAL</td>
<td>7</td>
<td>4</td>
<td>2</td>
<td>0</td>
<td>0</td>
<td>1</td>
<td>0</td>
<td>0</td>
<td>0</td></tr>
</tbody>
</table>

[lardo5150]

From what I can tell, it looks the same.

is it the email portion of it maybe?  something the email does not like or is your output from the email?

[ArchitectMadhan]

Hi @lardo5150 ,

Here is the Compose with your table content and style for last row.

Send Email action:

Final output in Received email (from Outlook):

[lardo5150]

Crazy, not sure where to even look on this.

Did it exactly like that, just using the last row piece and nothing else.

It never came across as colored.

[lardo5150]

so I even went back and did a new compose straight on the output from create an html table.

It seems no matter what I do, i am able to format the table, format the headers, but nothing else.

I can format the entire body, but I am not able to do anything with the individual rows.

I can't figure out what I am doing different than you, especially since our outputs are the same.

[lardo5150]

Does it have anything to do with how your compose is working vs mine?

i am doing the CSS Style along with Output.

In yours, you are doing the CSS STyle but manually entering the table information.

[lardo5150 · Accepted solution]

So this looks to be a bug.

I saw one or two other posts like this, and there was no answer either.

Reading through his blog:

https://ryanmaclean365.com/2020/01/29/power-automate-html-table-styling/

He mentions he had the exact same issue, so he has a second way of doing it.

I ended up just redoing my flow like he did on the second part, and it is now working.