I want to make my table change its colors according to whether it is single or even-CodePudding

I have this code to make td's odds and evens background color so if someone got a new high score number a new td will be added and be colored automatically

It's not working like you see in the screenshot. Wwhat's the solution?

th {
  height: 30px;
  margin-top: 15px;
  background-color: white;
}

td {
  background-color: #fff;
  padding: 20px;
  font-size: 20px;
}

td:nth-child(even) {
  background: #f3f1f1
}

<table id="scoreboard" CELLSPACING=0 CELLPADDING=5>
  <tr>
    <th>Name</th>
    <th>Score</th>
  </tr>
  <tr>
    <td>Name 1</td>
    <td>Score 1</td>
  </tr>
  <tr>
    <td>Name 2</td>
    <td>Score 2</td>
  </tr>
</table>

CodePudding user response：

You are using the style on the td tag. That's why it's not working

Use it in tr

tr {
   background-color: #c4c4c4;
}

CodePudding user response：

If you want the ROWS to change colour, then use the CSS on the rows

th {
  height: 30px;
  margin-top: 15px;
  background-color: white;
}

tr {
  background-color: #fff;
  padding: 20px;
  font-size: 20px;
}

tr:nth-child(even) {
  background: #f3f1f1
}

<table id="scoreboard" CELLSPACING=0 CELLPADDING=5>
  <tr>
    <th>Name</th>
    <th>Score</th>
  </tr>
  <tr>
    <td>Name 1</td>
    <td>Score 1</td>
  </tr>
  <tr>
    <td>Name 2</td>
    <td>Score 2</td>
  </tr>
</table>