Trying to change background color of first column in table-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

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