Table featuring alternating background colors for rows and a distinct header design

Incorporating CSS, I have managed to style my rows in alternating colors. Take a look at the code snippet below: Fiddle

tr:nth-child(odd) td   { background-color:red; }
tr:nth-child(even) td   { background-color:blue; }
tr th { background-color: yellow}

table {
    border: 1px solid black;
    margin: 10px;
    width: 100px;
}

There's an issue when it comes to tables with headers - the header row is counted as the first row, causing the data to start with blue instead of red. Is there a way to ensure that the data always starts with red regardless of whether a table has a header or not?

Answer №1

Utilize <tbody> and <thead>

Implement the use of <tbody> to contain all body rows, while enclosing your header within <thead>. See updated CSS below:

tbody tr:nth-child(odd) td   { background-color: orange; }
tbody tr:nth-child(even) td   { background-color: green; }
thead tr th { background-color: pink}

This approach allows you to target only the content rows rather than the header rows. I hope this solution proves beneficial for you...

Fiddle: http://jsfiddle.net/praveenscience/ZRbE8/

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

What is the best way to display an alert when the button is clicked repeatedly?

Is it possible to keep displaying the alert every time we click the button, rather than just once after clicking it? I currently have an alert set to trigger when a button is clicked, but it disappears after 3 seconds. How can I make it show up again with ...

Is there a way to access an object stored on my server using JavaScript?

In implementing JavaScript, I wish to define two objects stored in a file named file.txt, and utilize them within my code. For instance, I have included the following snippet in my index.php: var counter = Number(localStorage.getItem('rans')) ...

Looking for assistance in designing a responsive web page with CSS, specifically in determining the optimal page width

Currently, I am working on making my web page responsive for four different screen sizes (320px, 640px, 980px, and 1024px). Everything looks great and adapts well when I resize the site up to 1024px. However, once the size goes beyond that, I want to preve ...

"Enhancing HTML table rows using jQuery for a dynamic user experience

I'm currently using a jQuery script to determine the number of rows in a table and then display that count within a <td> tag. <tr> <td id = "jquery"> </td> <td> <%= f.text_field :data1 %> </td> <td ...

In Outlook, images are always shown in their true dimensions

While everything is working perfectly fine in Gmail, Yahoo, and Hotmail, there seems to be an issue with the display of the logo image on Outlook. The custom width and height settings are not being applied properly, resulting in the logo being displayed ...

Image pop-ups that overlay text on the homepage

I'm facing an issue and I'm looking for a solution... Upon entering my homepage, I would like to display a popup image showcasing a new event so visitors can see it before accessing the website. I attempted to achieve this using JavaScript but w ...

Retrieve the initial value of the input element following a modification

Is there a way to retrieve the original default value of an input field after changing it using .val()? In my HTML, I have various text-inputs with classes .large and .medium, each with its own default text value. What I'm trying to achieve is when a ...

What is the method for embedding HTML content into the header section of tcpdf?

I am currently utilizing the tcpdf library to create a PDF document. I have implemented the smarty template engine to manage the data. Below is the code snippet for inserting header data: // set default header data $pdf->SetHeaderData(PDF_HEADER_LOGO, ...

Design a custom scrolling navigation bar for enhanced user experience

Struggling with web design as I develop a site in ASP.NET. I have a database full of courses, each with numerous modules. The challenge is creating a navigation bar that dynamically adjusts to accommodate the varying number of modules per course without o ...

Checking if the iframe location has been modified using Jquery

Looking to determine if the location of an iframe has been modified. function checkLocation() { setInterval(function(){alert("Hello")},3000); if (document.getElementById("myiframe").src = 'http://www.constant-creative.com/login';) { } ...

Angularv9 - mat-error: Issue with rendering interpolated string value

I have been working on implementing date validation for matDatepicker and have run into an issue where the error messages do not show up when the start date is set to be greater than the end date. The error messages are supposed to be displayed using inter ...

Deliver the event target within the data-bind click HTML

I am having trouble sending the event target when passing parameters in data-bind. <button class="tablinks" data-bind="click:$root.notify.bind(this, 1, 'foo');" id="defaultOpen">PRINCIPAL</button> self.notify = function (str, id, e) ...

Position two div elements and an hr tag to create a step progress bar

Check out my progress bar design https://i.sstatic.net/u9SRM.png How can I center the 'created' and 'assigned' divs below the circle while ensuring the 'hr' line touches the circle, and it is responsive across different scre ...

Choosing an item prior to a break in the text line

I designed a navigation bar with the following CSS structure nav { text-align: center; } nav > ul { list-style: none; padding: 0; margin: 8px auto; } nav > ul > li { display: inline- ...

jQuery Super-sized Not Expanding Vertically

I am facing an issue with resizing a 1920x1200 background image using jQuery Supersized. Whenever I resize the browser, there is a gap that appears vertically instead of filling up to compensate for the width constraint. I have checked and copied the sett ...

Issue with excessive content causing scrolling difficulty

I've created CSS for a modal dialog, but I'm facing an issue. When the content exceeds the vertical space of the wrapper, the scrolling functionality doesn't work correctly. Although I can scroll, it's limited and I can't reach th ...

I am facing an issue with my JavaScript variable that keeps changing temporarily. How can I ensure that its value remains permanent? Console log

I recently made some edits to the p tags, but only one of them appeared to have changed. Upon trying to display the changes again, I couldn't see any difference. Here's the code snippet that I'm working with: $(document).ready(function() ...

Why doesn't "align-self: flex-end" relocate the game board to the bottom of the screen?

Hey there, I am currently working on developing a Connect 4 game and have decided to use a table for the board. To position the board properly, I am utilizing flexbox. Although I have specified align-items as 'flex-end' in order to bring it to th ...

What is the best way to incorporate additional list items into a field input?

I have been working on developing a simple to-do app and I am encountering an issue. After the user clicks enter in the input box, nothing happens as expected. Despite trying various methods, the problem persists. Below is the recent code that I have been ...

Python code encountering issues within Django framework

I'm having trouble showing and hiding HTML elements based on the data I receive after clicking a button. The output of another Python file will generate this data, but the if statement doesn't seem to be working as expected: {% if data == 'e ...