Creating a Table with Alternating Rows in HTML

Here is how my table looks. I attempted to apply striping with the following CSS:

   tr:nth-child(even)  {
   background-color:#AD0D10;
}
<table>
 <tr>
    <th >xxx</th>
    <th >xxxxx</th>
    <th>xxxxxxx</th>
    <th>xxxxxx</th>
    <th>xxxxxxx</th>
    <th>xxxxxxx</th>
    <th>xxxxx</th>
    <th>xxxxxxxx</th>
    <th>xxxxxxx</th>
    <th>xxxxxxxxxx</th>
    <th>xxxxxxxxxxxxxx</th>
  </tr>
<tr>
    <td rowspan="2">1</td>
    <td>88888888</td>
    <td>8888888</td>
    <td>8888888</td>
    <td>8888888</td>
    <td>888888888</td>
    <td>8888888</td>
    <td>88888888</td>
    <td>8888888</td>
    <td>8888888</td>
  </tr>
  <tr>
    <td>88888</td>
    <td colspan="3">888888</td>
    <td>8888</td>
    <td colspan="4">8888888</td>
  </tr>
  <tr>
    <td rowspan="2">2</td>
    <td>88888888</td>
    <td>8888888</td>
    <td>8888888</td>
    <td>8888888</td>
    <td>888888888</td>
    <td>8888888</td>
    <td>88888888</td>
    <td>8888888</td>
    <td>8888888</td>
  </tr>
  <tr>
    <td>88888</td>
    <td colspan="3">888888</td>
    <td>8888</td>
    <td colspan="4">8888888</td>
  </tr>
 
</table>

Except for the header, each row in the table consists of two td elements. If I consider these rows as main rows, I want them to be striped together. Currently, using tr:nth-child(even)> tr doesn't produce the desired result.

htmlcss

Answer №1

It's important to understand that your CSS code:

`tr:nth-child(even)`

is working as intended; even though the first cell in each row spans multiple rows, the <tr> itself does not increase in size—it's just that the <td> now occupies space in each row.

To address this, we can style every alternate pair of <tr> elements using two :nth-child() selectors:

// selecting every fourth <tr> element within the <tbody> element:
tbody tr:nth-child(4n),
// selecting the <tr> element that precedes every fourth <tr>
// element within the <tbody>:
tbody tr:nth-child(4n-1) {
  background-color: #f00;
}


tbody tr:nth-child(4n),
tbody tr:nth-child(4n-1) {
  background-color: #f00;
}
<table>
  <thead>
    <tr>
      <th>xxx</th>
      <th>xxxxx</th>
      <th>xxxxxxx</th>
      <th>xxxxxx</th>
      <th>xxxxxxx</th>
      <th>xxxxxxx</th>
      <th>xxxxx</th>
      <th>xxxxxxxx</th>
      <th>xxxxxxx</th>
      <th>xxxxxxxxxx</th>
      <th>xxxxxxxxxxxxxx</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2"></td>
      <td>88888888</td>
      <td>8888888</td>
      <td>8888888</td>
      <td>8888888</td>
      <td>888888888</td>
      <td>8888888</td>
      <td>88888888</td>
      <td>8888888</td>
      <td>8888888</td>
    </tr>>
    <tr>
      <td>88888</td>
      <td colspan="3">888888</td>
      <td>8888</td>
      <td colspan="4">8888888</td>
    </tr>>
    <tr>
      <td rowspan="2"></td>
      <td>88888888</td>
      <td>8888888</td>
      <td>8888888</td>
      <td>8888888</td>
      <td>888888888</td>
      <td>8888888</td>
      <td>88888888</td>
      <td>8888888</td>
      <td>8888888</td>
    </tr>>
    <tr>
      <td>88888</td>
      <td colspan="3">888888</td>
      <td>8888</td>
      <td colspan="4">8888888</td>
    </tr>>
    <tr>
      <td rowspan="2"></td>
      <td>88888888</td>
      <td>8888888</td>
      <td>8888888</td>
      <td>8888888</td>
      <td>888888888</td>
      <td>8888888</td>
      <td>88888888</td>
      <td>8888888</td>
      <td>8888888</td>
    </tr>>
    <tr>
      <td>88888</td>
      <td colspan="3">888888</td>
      <td>8888</td>
      <td colspan="4">8888888</td>
    </tr>>
    <tr>
      <td rowspan="2"></td>
      <td>88888888</td>
      <td>8888888</td>
      <td>8888888</td>
      <td>8888888</td>
      <td>888888888</td>
      <td>8888888</td>
      <td>88888888</td>
      <td>8888888</td>
      <td>8888888</td>
    </tr>>
    <tr>
      <td>88888</td>
      <td colspan="3">888888</td>
      <td>8888</td>
      <td colspan="4">8888888</td>
    </tr>>
    <!-- More table rows here -->
  </tbody>
</table>

Check out the JS Fiddle demo.

Additional Info:

  • I've duplicated some row groups in the table to show that the pattern extends beyond a simple example,
  • The <tr> containing the <th> elements is placed in its own <thead> for semantic reasons and to differentiate it from other rows with <td> elements within the same <tbody>.

In terms of terminology, there are no "main" or "sub" rows; all rows are treated equally despite any <td> elements spanning multiple rows.

Resources cited:

Answer №2

Do you always have your colspan column in the first position?

If yes, refer to the example below.

If not, check out Irina's answer :)

tr:nth-child(even) td:not(:first-child)  {
   background-color:#AD0D10;
}
<table>
 <tr>
    <th >xxx</th>
    <th >xxxxx</th>
    <th>xxxxxxx</th>
    <th>xxxxxx</th>
    <th>xxxxxxx</th>
    <th>xxxxxxx</th>
    <th>xxxxx</th>
    <th>xxxxxxxx</th>
    <th>xxxxxxx</th>
    <th>xxxxxxxxxx</th>
    <th>xxxxxxxxxxxxxx</th>
  </tr>
<tr>
    <td rowspan="2"></td>
    <td>88888888</td>
    <td>8888888</td>
    <td>8888888</td>
    <td>8888888</td>
    <td>888888888</td>
    <td>8888888</td>
    <td>88888888</td>
    <td>8888888</td>
    <td>8888888</td>
  </tr>
  <tr>
    <td>88888</td>
    <td colspan="3">888888</td>
    <td>8888</td>
    <td colspan="4">8888888</td>
  </tr>
  <tr>
    <td rowspan="2"></td>
    <td>88888888</td>
    <td>8888888</td>
    <td>8888888</td>
    <td>8888888</td>
    <td>888888888</td>
    <td>8888888</td>
    <td>88888888</td>
    <td>8888888</td>
    <td>8888888</td>
  </tr>
  <tr>
    <td>88888</td>
    <td colspan="3">888888</td>
    <td>8888</td>
    <td colspan="4">8888888</td>
  </tr>
 
</table>

Answer №3

It seems a bit unclear what you're asking for, but here's an example that might help clarify things:

tr:nth-child(even) + tr {
   background-color:#AD0D10;
}
<table>
  <tr>
      <th >xxx</th>
      <th >xxxxx</th>
      <th>xxxxxxx</th>
      <th>xxxxxx</th>
      <th>xxxxxxx</th>
      <th>xxxxxxx</th>
      <th>xxxxx</th>
      <th>xxxxxxxx</th>
      <th>xxxxxxx</th>
      <th>xxxxxxxxxx</th>
      <th>xxxxxxxxxxxxxx</th>
    </tr>
  <tr>
      <td rowspan="2"></td>
      <td>88888888</td>
      <td>8888888</td>
      <td>8888888</td>
      <td>8888888</td>
      <td>888888888</td>
      <td>8888888</td>
      <td>88888888</td>
      <td>8888888</td>
      <td>8888888</td>
  </tr>
  <tr>
      <td>88888</td>
      <td colspan="3">888888</td>
      <td>8888</td>
      <td colspan="4">8888888</td>
  </tr>
  <tr>
      <td rowspan="2"></td>
      <td>88888888</td>
      <td>8888888</td>
      <td>8888888</td>
      <td>8888888</td>
      <td>888888888</td>
      <td>8888888</td>
      <td>88888888</td>
      <td>8888888</td>
      <td>8888888</td>
  </tr>
  <tr>
      <td>88888</td>
      <td colspan="3">888888</td>
      <td>8888</td>
      <td colspan="4">8888888</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

Troubles with XS & SM screen sizes when printing

Currently, I am facing an issue specifically on XS or SM screen sizes. For printing purposes, I have a specific style that I implement on my pages and I included the following code within @media print {} .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-s ...

htmlcssprintingscreenmedia

Array of TextBoxes in HTML

After utilizing jQuery, I have managed to create an array of textboxes. <input type="text" name="salaries[]" value="100,000"> <input type="text" name="salaries[]" value="200,000"> <input type="text" name="salaries[]" value="300,000"> < ...

c#jqueryhtmltextbox

Can someone explain the method for displaying or concealing a menu based on scrolling direction?

https://i.stack.imgur.com/tpDx0.jpg I want to hide this menu when scrolling down and show it when scrolling up. The code for my menu bot is: <script> var previousScroll = 0; $(window).scroll(function(event){ v ...

javascriptjqueryhtmlcss

Retrieving data from an HTML Table using Javascript

I am in the process of designing a dynamic web form that populates from a stored procedure. The form consists of a table with a dropdown list, a text box, and a label. While I can successfully retrieve data from the dropdown and text box, I am facing diffi ...

javascriptc#htmlasp.nethtml-table

Error: dbg variable is not defined in AngularJS

I'm currently in the process of learning angularjs by following a tutorial from this source Take a look at my index.jsp below - <!doctype html> <html lang="en" ng-app="phoneCatApp"> <head> <title>Angular Example</title> ...

htmlangularjsajax

Alter the class generated by ng-repeat with a click

I currently have a dynamically generated menu displayed on my website, and I am looking to apply a specific class to the active menu item based on the URL (using ngRoutes). The menu items are generated from a $scope.menu object, so my initial thought was t ...

htmlangularjs

Exploring the Power of JQuery with Hover Effects and SlideToggle

I was struggling to keep the navbar displaying without it continuously toggling when my pointer hovered over it. I just wanted it to stay visible until I moved my pointer away. <script> $(document).ready(function(){ $(".menu-trigger").hover(funct ...

javascriptjqueryhtmlcsshover

Retrieving the content of a nested span element inside another span element

I am looking to extract the contents of all the span elements and store them in a dictionary. Currently, I can only access the first span element with the code provided. Is there a more efficient way to achieve this? Perhaps using Selenium would be a bette ...

htmlseleniumweb-scrapingbeautifulsoup

Error: Unable to assign value to the innerHTML property of an undefined element created by JavaScript

When designing my html form, I encountered an issue where I needed to display a message beneath blank fields when users did not fill them out. Initially, I used empty spans in the html code to hold potential error messages, which worked well. However, I de ...

javascripthtml

The link element could not be found

Having trouble finding the 'Search' link, and encountering the error message: org.openqa.selenium.NoSuchElementException: Unable to locate element: {"method":"link text","selector":"Search"} Upon inspecting the object using Firebug: < ...

javahtmlselenium-webdriver

The Twitter widget functions properly upon initial loading, but subsequently malfunctions

I have a web application built using the Play Framework that utilizes Ajax to load view html pages into a 'container' div. $( "#container" ).load("/contactUs"); // The contactUs page contains the widget In one of my html pages, I include a Twit ...

javascripthtmlcsstwitter

Tips for positioning text directly beneath another text within the same list item:

I'm currently developing a vertical menu bar from scratch. To ensure responsiveness, I am using the CSS techniques demonstrated in Responsive Web Design by W3school. The menu consists of 5 list items with Font Awesome icons embedded within. I have set ...

htmlcss

Ways to emphasize the currently active tabs on a navigation bar

How can I highlight the active tabs and shift it when clicking on another link? $(function() { $('.nav ul li').on('click', function() { $(this).parent().find('li.active').removeClass('active'); $(this).a ...

jqueryhtmlcss

Preserving information from a disconnected Checkbox

As I work on developing my app, I've encountered a slight hiccup in the process. Currently, I'm faced with the challenge of preserving data generated by if statements for a checkbox. While I have successfully achieved this for a radio button by s ...

javascripthtml

Whenever I include an onClick event to a div element, the entire webpage fails to display

Currently taking on the task of developing a seat booking website. I am encountering an issue with adding an event listener to a particular div element, which should trigger a function to store the value of the div. However, upon implementing the onClick e ...

javascripthtmlreactjs

What is the method to alter the color of an SVG source within an image tag?

I am currently working on a component that involves changing the color of an SVG icon from black to white when a color prop is given. export class CategoryIconComponent extends React.Component { static displayName = 'CategoryIcon'; state = ...

javascriptcssreactjssvgecmascript-6

Combining ASP.NET MVC with HTML5 for dynamic web development

We are in the process of planning a new project and are interested in utilizing ASP.NET with the MVC pattern. Additionally, we want to incorporate the new features of HTML5. However, we have been having trouble finding sufficient information or connecting ...

asp.net-mvchtml

Retrieve text from an element using jQuery when triggering "mouseenter" on a different element

Is there a way to retrieve the text from an element while simultaneously triggering a 'hover' action on another element? Here is an illustration: I am trying to gather all available colors, but the color names are only visible upon hovering ove ...

javascriptjqueryhtmlcss

Creating a dynamic table in JQuery using Datatables to append a new row from user input

I am in the process of developing a webpage that showcases player statistics using a jQuery Datatable. While I have successfully displayed data from the database, I am encountering difficulties when trying to add new players. Even though I implemented an " ...

jqueryhtmldatatablesrow

What strategies can I use to include multiple spans within div elements without causing the code to become overly lengthy?

I'm working with 20 spans representing movie genres, each accompanied by another span that "closes" the genre when selected. The closing span has an .active class, similar to this example: https://i.sstatic.net/7CuuX.png My version currently looks li ...

htmlcss