I'm working with a table in HTML that has about 100 rows. I would like to apply different colors to specific groups of rows, such as making rows 1-10 red and rows 20-40 blue.
Using nth-child seems like an option, but it can get quite verbose if I need to select a larger range of rows, like 20-50. Is there a more efficient way to target rows 20-50 and assign them a color?
<table id="table">
<tr>
<!-- content -->
</tr>
<!-- 100 tr elements here -->
</table>
It's essential to assign specific
CSSstyles to each group
Take a look at this Snippet
tr:nth-child(n+0) {
background: blue;
}
tr:nth-child(n+10) {
background: red;
}
tr:nth-child(n+20) {
background: yellow;
}
tr:nth-child(n+50) {
background: grey;
}<table style="width:100%">
<tr>
<td>Bill Gates</td>
</tr>
<tr>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
<tr>
<td>Bill Gates</td>
</tr>
<tr>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
<tr>
<td>Bill Gates</td>
</tr>
<tr>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
<tr>
<td>Bill Gates</td>
</tr>
<tr>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
<!-- Additional rows here -->
</table>To enhance the design, you can modify the CSS code as shown below:
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
With this adjustment, alternating rows will have different background colors.
If you need more than just two color options, you can utilize the formula (an + b), where a represents the cycle size, n is a counter that starts at 0, and b is an offset value. For example, to assign background colors to every third row, use the following code:
tr:nth-child(3n+0) {background:#999;}
tr:nth-child(3n+1) {background:#CCC;}
tr:nth-child(3n+2) {background:#FFF;}
Currently in the process of creating my inaugural website, which consists of just four pages. Each page follows the standard layout structure with a header, navigation bar, content division (div id="content"), and footer. As I delve into adding CSS proper ...
I'm currently working on a website where I display the number of online users. However, I've encountered an issue with the online user counter not refreshing automatically. When I open the site in a new tab, the counter increases in the new tab b ...
const DATA = [ { car_name: 'Ford', model_number: '2021 . 68 - 1647', full_tank: false, suggestion: [ { price: '$2.50', type: 'Oil Top up&apos ...
My Android WebView is experiencing issues with memory access and crashes on a Galaxy S3 running Android 4.0.4. The HTML5 content includes interactive battles where enemies appear for the user to slash, interspersed with normal HTML pages. Despite the use o ...
Having just begun experimenting with AJAX, I'm encountering difficulties in passing variables back to my HTML script. In this setup, I'm using a combination of a XAMPP webserver, JavaScript, and jQuery for the HTML script, along with a Perl cgi ...
One date format in question is as follows: Tue Oct 20 2020 00:00:00 GMT+0100 (Central European Standard Time) After using the method myValue.toISOString();, the resulting date is: 2020-10-19T23:00:00.000Z This output shows a subtraction of one day from ...
Implementing a directive in <input type='text'> to restrict user input to numbers has been successful! The issue arises when a user copies and pastes a string, causing Angular to accept the value and send it to the backend. angular.module ...
So, I have 2 follow/unfollow forms in my Rails code. Here's the first one: <%= form_tag( {:controller => 'profile', :action => 'unfollow_topic' }) do %> <%= hidden_field_tag :topic_id, @topic.id %> <button ...
Currently exploring my knowledge of node.js alongside express and the ejs template. As I delved into some code, I stumbled upon the fact that they were able to invoke config in the template without explicitly passing it as a variable during rendering. You ...
Working on a project in EZPublish, I am utilizing the EZJScore module to create JSON arrays. The Ezjscore module requires me to use double colons to separate parameters, like this: http://[domain]/ezjscore/call/news::cat::3 After extensive testing, I ...
I'm new to HTML and have been experimenting with this CSS file to center my form. I've managed to get it working, but the issue now is that it's causing scroll bars to appear on the web browser. How can I resolve this without them? @import ...
Users are experiencing an issue where the need for adjusting margins based on the depth of responses in posts. Currently, this involves setting a margin-left value of 40px for one level deep reactions and 80px for two levels deep, and so on. To address th ...
My BaseSchema contains logic that should set values for two properties when a new Model is created: schema.pre("save", function (next) { if (!schema.isNew) { this.createDate = new Date(); this.createBy = "kianoush"; } next(); }); If updating, ...
Here is a snippet of my code in okay.html: {% extends "sch/base.html" %} {% load staticfiles %} {% block content %} <div class="row" id="ada"> <form action="" method="post> {% csrf_token %} <div align="center" class="cont ...
Here is a form input that I need to handle: <tr class="formulaRow"> <input type="text" class="ingredient required" name="ingredient"> </tr> Currently, the value from this input is stored as follows: var ingredient = $(".formulaRow").fi ...
I am in need of some assistance with the navigation on my website. You can find the current code at this link: http://jsfiddle.net/Sharon_J/cf2bm0vs/ Currently, when you click on the 'Plus' sign, the submenus under that category are displayed bu ...
I have come across a list fragment that is generated automatically and I only have the ability to adjust the CSS for it. <ul class="menu"> <li class=" menuItem1 first parent"></li> <li class=" menuItem2 parent"></li> ...
Having encountered another issue, I've been attempting to make an AJAX script function properly, but whenever I click on it, the page reloads without updating the database field. The code I'm using has successfully worked for similar scripts on ...
I have a situation where I need the height of one div to automatically adjust based on changes in the height of another div. var height = jQuery('#leftcol').height(); height += 20; jQuery('.rightcol-botbg').height(height); Unfortun ...
I conducted tests in both Chrome and Firefox, ruling out any browser-related issues. My CSS has been validated and is error-free. However, when I validate my HTML code, an error message pops up stating "Bad value “stylesheet” for attribute rel on eleme ...