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>

htmlcss

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

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is the menu not appearing in the header section of the HTML/CSS?

Hey there, I'm a new student diving into the world of HTML/CSS. I've been working on creating a page layout, but for some reason my menu links are appearing under the header section instead of within it. I'm a bit confused and could really u ...

htmlcsscss-selectors

Creating personalized columns in a BootstrapVue table

I'm having an issue with the b-table component in bootstrap-vue. The array containing my items is structured like this: [{ id: 1, name: "Test", phone: 555-111-666, address: "Some Address", //etc... }] I have a couple of question ...

javascripthtmlcssvue.jsbootstrap-4

The style of CSS remains constant within the JSP file

Having trouble updating styles on a JSP page using CSS. Here is the code snippet for linking: <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/Profile.css" /> Initially, the styling wo ...

javacssweb

Arrange, Explore (Refine), Segment HTML Chart

Is there a way to efficiently sort, paginate, and search (based on a specific column) data in an HTML table? I've explored several JQuery plugins such as DataTable, TableSorter, Picnet Table Filter, but none seem to offer all three functionalities (se ...

phpjavascriptjqueryhtmljquery-plugins

The X-axis remains visible even after being hidden and still functions properly in mobile view

I've been encountering some minor bugs while working on a website recently. One particular issue I'm struggling to fix involves the x-axis not hiding despite attempts in CSS, especially on mobile view. body { overflow-x: hidden; overflo ...

htmlcssweb

Ensuring that your content expands to fit the sidebar dimensions

I have diligently searched for a solution to my issue both on Google and here, but have yet to find one that works. I've experimented with various CSS properties like display: table-cell and inline-block, as well as different overflow options, but not ...

css

PubNub's integration of WebRTC technology allows for seamless video streaming capabilities

I've been exploring the WebRTC sdk by PubNub and so far, everything has been smooth sailing. However, I'm facing a challenge when it comes to displaying video from a client on my screen. Following their documentation and tutorials, I have writte ...

javascripthtmlwebrtcpubnub

Having trouble inserting an image using Vue?

I am having trouble understanding why only the first image loads, while the others do not. 1. <img :src="require('../assets/batatas.jpg')" :alt="item.title" /> 2. <img :src="'../assets/batatas.jpg'" ...

javascripthtmlvue.jsvuejs3

HTML/CSS - How to make an element wider than its containing element while staying visible

I am currently working on a web page that generates a table with a green background labeled by an h2 element. The challenge I'm facing is ensuring that the h2 element extends horizontally as far as the user scrolls so that there is always a green bar ...

htmlcsslayout

Error alert: The system could not locate Google when trying to drop pins

Every time I attempt to place pins on the map, I encounter the "google is not defined" error. The map itself displays without any issues until I add the lines following the initMap() function. I have come across similar posts but none of the suggested so ...

javascripthtmlgoogle-mapsgoogle-maps-api-3

I'm encountering some strange blank white space when I view my webpage on a phone or Safari. It seems to be affecting the CSS grid and flexbox of images

Currently, I am engaged in a 180-day challenge to create webpages on . For website number 9, the task at hand is to showcase 8 images in a grid layout. Surprisingly, this layout appears flawlessly on my Mac when using Chrome but encounters issues displayin ...

htmlcssflexbox

Adjusting the height of a textarea within a table

My textarea's height is supposed to be 500%, but it's not changing. I suspect that being inside a table might have something to do with the issue, but I'm unsure of what needs to be adjusted to set the height correctly. Surprisingly, the wid ...

javascriptjqueryhtmlcss

One XMLHTTPRequest with multiple replies

My requirement is to have a consolidated XMLHttpRequest call that returns three unique items. These items consist of an HTML formatted table and two separate sets of JSON data for Google Charts. The reason behind this design is that the chart data relies o ...

htmljsonxmlhttprequest

How can I attach a click event to the left border of a div using jQuery?

I am wondering about a div element <div id="preview"> </div> Can anyone suggest a method to attach a click event specifically to the left border of this div? Your help is greatly appreciated. ...

javascriptjqueryhtmlclick

Managing access to HTML pages on Tomcat 5.5 through tokens

My server is running Tomcat 5.5 and it hosts several HTML pages that I want to restrict access to. In order to do this, I need to implement a system where users' HTTP requests are checked for specific authentication values. I am looking to create a f ...

htmltomcatsecuritytomcat5.5

I am in search of a JavaScript or jQuery plugin for an HTML slider with a unique range functionality

I've been searching online but couldn't find a slider like the one shown in the attachment. Can anyone help? Is there a way to create this specific slider or is there an existing plugin or library for it? Please refer to the image below : ...

javascriptjqueryhtmlrange

Show a div pulsating while simultaneously animating another div

After coming across this query on Stack Overflow about adding a class without jQuery if hovering over another class I encountered an issue with a div element that displays upon hovering over a span, which was functioning correctly. However, I also have a ...

htmlcss

What is the best way to allocate a larger size to one part of a flex div?

A div is used to insert information <div class="inputs"> <div class="content">@Html.TextBoxFor(model => invoices.ProductDesc, new { disabled = "disabled", @readonly = "readonly" })</div> <div class="content">@Html.TextBo ...

css

Receiving an unexpected value from the input attribute

Currently, I am facing a challenge in retrieving data from another component by using the selector in the HTML file of the parent component. Here is how I implemented it: <app-graphs [module]="module" hidden></app-graphs> In the chi ...

htmlangulartypescriptinputparent-child

The vertical drop-down menu is displaying and functioning incorrectly

My vertical submenu is positioned correctly, but the links are overlapping on top of each other. The submenu doesn't hide when hovering over the main menu, but it does hide when hovering outside the menu. I'm unsure of what changes or additions t ...

csssubmenuonhover