You can try something like this:
table {
border: 2px solid #C1C1C1;
background-color: #FFFFFF;
width: 400px;
text-align: center;
border-collapse: collapse;
}
table td,
th {
border: 1px solid #555555;
padding: 5px 10px;
}
table tbody td {
font-size: 12px;
font-weight: bold;
color: #000000;
}
table thead {
background: #737373;
}
table thead th {
font-size: 15px;
font-weight: bold;
color: #FFFFFF;
text-align: center;
}
tbody tr td:first-child {
background-color: orange;
}
<table>
<thead>
<tr>
<th></th>
<th>Sunday^10/30/2022</th>
<th>Monday^10/31/2022</th>
<th>Tuesday^11/1/2022</th>
<th>Wednesday^11/2/2022</th>
<th>Thursday^11/3/2022</th>
<th>Friday^11/4/2022</th>
<th>Saturday^11/5/2022</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>Rest Day</td>
<td>Vacation</td>
<td>Vacation</td>
<td>Office</td>
<td>Remote</td>
<td>Office</td>
<td>Rest Day</td>
</tr>
</tbody>
</table>
Trying to use power automate to create tables and add styling to them in the body of an email. The last part of my project involves getting the first column of the table (name column) to have an orange background but I cannot seem to get the CSS working for this.
Style sheet:
<style>
table{
border: 2px solid #C1C1C1;
background-color: #FFFFFF;
width: 400px;
text-align: center;
border-collapse: collapse;
}
table td, th {
border: 1px solid #555555;
padding: 5px 10px;
}
table tbody td {
font-size: 12px;
font-weight: bold;
color: #000000;
}
table thead {
background: #737373;
}
table thead th {
font-size: 15px;
font-weight: bold;
color: #FFFFFF;
text-align: center;
}
table tr td:nth-child(1)
{
background-color: orange;
}
</style>
HTML output from PowerBI’s HTML table action:
<table>
<thead>
<tr>
<th></th>
<th>Sunday^10/30/2022</th>
<th>Monday^10/31/2022</th>
<th>Tuesday^11/1/2022</th>
<th>Wednesday^11/2/2022</th>
<th>Thursday^11/3/2022</th>
th>Friday^11/4/2022</th>
<th>Saturday^11/5/2022</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td> <-- this column needs to be orange
<td>Rest Day</td>
<td>Vacation</td>
<td>Vacation</td>
<td>Office</td>
<td>Remote</td>
<td>Office</td>
<td>Rest Day</td>
</tr>
</tbody>
</table>
Unfortunately the background does not change when I try this.
Have you researched what email client supports what? Outlook supports background-color but it does nor support :nth-child and similar. So you maybe will have to plod through inserting style attribute into each first child before sending the email. See
oh that’s like IE10 or some crap isn’t it? Nevermind. Use the font tag.
Unfortunately the background does not change when trying this.
I think you mean that it does not change inside your an email. In that case we would need more details. Some mail clients overwrite the background by force making it quite tedious to apply your own styling.
Correct. It does not change within the email body. The email client is Outlook.
Outlook does not support this.
You cannot use nth-child in Outlook, it does not support it.