Solution 1 :

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>

Solution 2 :

So you can use the nth-child, this is gonna be helpful

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child?retiredLocale=de

Problem :

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>

Comments

Comment posted by chovy

tbody tr td:first-child

Comment posted by thebigrlebowski

Unfortunately the background does not change when I try this.

Comment posted by templates.mailchimp.com/resources/email-client-css-support

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

Comment posted by chovy

oh that’s like IE10 or some crap isn’t it? Nevermind. Use the font tag.

Comment posted by thebigrlebowski

Unfortunately the background does not change when trying this.

Comment posted by sm3sher

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.

Comment posted by thebigrlebowski

Correct. It does not change within the email body. The email client is Outlook.

Comment posted by A Haworth

Outlook does not support this.

Comment posted by A Haworth

You cannot use nth-child in Outlook, it does not support it.

By