I am looking to create a feature for my table that adjusts its color scheme based on whether the number is odd or even

Question

I am looking to create a feature for my table that adjusts its color scheme based on whether the number is odd or even

My current code is designed to change the background color of td elements for odd and even rows. However, when a new high score is entered, a new td is added but it does not get colored automatically as intended.

I am facing an issue where the code is not behaving as shown in the provided screenshot. Can anyone suggest a solution?

https://i.stack.imgur.com/zCFEE.png

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>AAA </td>
    <td>1</td>
  </tr>
  <tr>
    <td>BBB </td>
    <td>2</td>
  </tr>
  <tr>
    <td>CCC </td>
    <td>3</td>
  </tr>

</table>

html css

Answer 1

Answer №1

The issue lies in applying the style to the td tag instead of the tr tag.

To fix this, make sure to use the style on the tr element.

tr {
   background-color: #c4c4c4;
}

Answer 2

The issue lies in applying the style to the td tag instead of the tr tag.

To fix this, make sure to use the style on the tr element.

tr {
   background-color: #c4c4c4;
}

Answer 3

Answer №2

If you'd like the ROWS to have a different color, apply this CSS directly to 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>

Answer 4

If you'd like the ROWS to have a different color, apply this CSS directly to 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>

I am looking to create a feature for my table that adjusts its color scheme based on whether the number is odd or even

Answer №1

Answer №2

Similar questions

Batch Script for Reading and Writing HTML files

Resizable icon next to inline element caused width adjustment

If you want to retrieve the calculated value of a div using jQuery

Finding your way to a <div data-role="page"> sans the use of an anchor tag

Is there a way to customize the hamburger icon for the navigation bar in Bootstrap 4?

Eliminating render-blocking CSS in PageSpeed - one stylesheet at a time

Turn off browser feature that automatically adds overflow:hidden on touch screen devices

Exploring the intricacies of using jquery text() with HTML Entities

Generating a Popup Alert with a DIV

Concealing the text input cursor (caret) from peeking through overlaid elements on Internet Explorer

Rails: Generating HTML output straight from the controller

display data labels within the chart - utilizing the power of angular.js in conjunction with chart.js

Using background-image in Internet Explorer has always been a challenge

Using JQuery to call a PHP file and verify a unique identifier

Leverage an HTML table to serve as a data source for populating a Kendo UI template

Place the Div directly above a distinct Div

Iterating through every image displayed on a webpage

One project contains a pair of React instances

What steps are needed to enable the keyboard on a Otree application for mobile devices?

Position the float input to the right on the same line as an element