My current project involves styling a table. I am looking to apply a specific background color to each odd row, excluding the first row which contains headers.
I attempted the following code without success:
.new-items-table tr:nth-of-type(odd):not(.new-items-table tr:nth-of-type(1))
{
background-color: red;
}
To achieve this effect, all you have to do is:
.item-table-new tr:nth-child(2n + 3) {
background-color: blue;
}
2n + 1 can be written as odd, while 2n + 3 will skip the first two rows.
Check out the demonstration here: http://jsfiddle.net/ABCD/
Consider these alternatives:
1. ~ selector - http://jsfiddle.net/5sKqX/
.new-items-table tr ~ tr:nth-of-type(odd) {background-color:red;}
This targets rows that come after other rows, excluding the header row.
2. utilize <thead> - http://jsfiddle.net/5sKqX/1/
<thead>
<tr><th>Header</th></tr>
</thead>
<tbody>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
</tbody>
Css:
.new-items-table tr:nth-of-type(even) {background-color:red;}
3. use :not(:first-child) - http://jsfiddle.net/5sKqX/2/
.new-items-table tr:nth-of-type(odd):not(:first-child) {background-color:red;}
In response to your inquiry, I recommend enclosing your headers in <thead></thead> and the main content of the table within <tbody></tbody>. Once you have done this, you can implement the following CSS rule:
.tabular-data tbody tr:nth-child(odd)
{
background-color: blue;
}
I have encountered an issue while trying to download a PDF using Ajax response HTML. Here is the code I am using: var newPDFAction = function () { $.ajax({ type: "post", url: '{{ route("admin.getCustomerSalesRepTota ...
As a newcomer to Django, I have been learning from various Youtube tutorials. Even though I followed the steps exactly, I encountered a block tag error in my code. Here is an excerpt from my base.html template: <head> <meta charset="UTF-8"& ...
I am trying to ensure that the first two columns in both the green and violet rows always have the same height. I initially thought of using d-flex align-items-stretch, but it seems like it is not working because those elements are not within the same row ...
I am looking to implement scrolling for just the "chat-messages" div within the "chat-bar" div on my site. I want only this specific section to be scrollable, while the rest of the site remains stationary. Currently, I have to scroll through the entire pag ...
After using the ng generate @angular/material:material-nav --name=home command to create a navbar, I am trying to make it fixed at the top while scrolling. I attempted using position: fixed; on my mat-sidenav-content but it didn't work. Does anyone ha ...
I need to attach an ID to an Angular material checkbox. I have an object called item. When I check the HTML code, it shows 'item.id + '-input'. However, when I bind the name, it works fine with just 'item.id'. Below is my current ...
Recently, I've delved into using PHPMailer to handle my contact forms via email and after some trial and error, everything is running smoothly. The only minor inconvenience is that users are redirected after sending an email. For instance: If a user ...
I have an interesting code snippet that captures button clicks and then hides the existing content, revealing the content of the clicked item instead. This code is part of my init.js file along with other functionalities: $(function() { $('#conta ...
Hey there! I'm facing an intriguing challenge with my app. It's designed to generate a variable number of divs which are always in absolute positioning. Unfortunately, making them relative is not an option due to some other factors within the app ...
Google fonts are being utilized in my project, specifically the Roboto font for light and regular font styles. Unfortunately, I am unsure of the file size of this particular font. ...
My CSS file is linked in 'main/static/css/style.css' and my pages are located in 'main/templates/main/pages.html'. However, the CSS does not seem to be working properly for some pages; for example, the h2 tag is not taking on the specif ...
I'm attempting to align the image directly before the text within the same div. I've applied CSS with text-align:center to the div, but it only seems to affect the text. Any suggestions on how to position the image right before the text? http:// ...
Working on a website for a gaming community, known as http://www.quad-gaming.com/. All is running smoothly except for the dropdown menu under "Login" on the right side of the navigation bar. It behaves properly in Chrome and Safari, but in IE and Firefox, ...
My website is organized into sections, with each section corresponding to a hyperlink in the navigation menu. I've applied the CSS property position: sticky to my navbar, which works as expected within the section bounds. However, I want my red navbar ...
As I attempt to create a dynamic arc-shaped pie graph using CSS, representing 100% of the data, I find myself facing challenges. Despite extensive research and Google searches, I have yet to come across a suitable solution. The following reference appears ...
After submitting via ajax, I am having trouble clearing form fields. Any help in checking my code and providing suggestions would be greatly appreciated. Here is the code snippet: jQuery(document).on('click', '.um-message-send:not(.disabled ...
Feeling a bit confused about a straightforward issue. Can someone clarify for me - What is the original background color of HTML elements? Is it white by default or transparent? ...
When creating a new page, how exactly does it work? For instance, on a website that allows users to create posts, you may see a link like this: example.com/post/randomised123 I'm curious - does this process also involve server directories like pop ...
I am attempting to execute a SELECT query from the Cassandra Database using a PHP script. The connection is successfully established through PHP. Here is the query: $session = $cluster->connect($keyspace); $result = $session->execute("SELEC ...
Is there a way to swap the positions of the left and right boxes using the sortable() function from jQuery UI? It seems to work fine for numbers 1 and 2, but not for switching the boxes. $(".sort-me").sortable({ connectWith: ".connectedSortable" } ...