Styling the CSS tables with alternating row styles for rows 1 and 2, followed by a different style for rows 3 and 4. This pattern will repeat

I've been struggling to create a CSS table style using tr:nth-child to alternate row colors:

Row 1 - Blue

Row 2 - Blue

Row 3 - White

Row 4 - White

... and so on.

I can't seem to get it right! Can anyone help me out with this?

Appreciate any assistance...

The HTML is generated by Powershell convertto-html, producing something like this:

<head>
<title>HTML TABLE</title>
<link rel="stylesheet" type="text/css" href=".\table.css" />
</head><body>
<p style="text-align:center;"><H2>Header</H2>
<table>
<tr><th>Count</th><th>Name</th></tr>
<tr><td>1</td><td>Gary</td></tr>
<tr><td>2</td><td>Sarah</td></tr>
<tr><td>3</td><td>Bob</td></tr>
<tr><td>4</td><td>Ian</td></tr>
<tr><td>5</td><td>Susan</td></tr>
<tr><td>6</td><td>Robin</td></tr>
<tr><td>7</td><td>Paul</td></tr>
<tr><td>8</td><td>Jane</td></tr>
</table>
</body></html>
css

Answer №1

One way to style your table rows is by using the following CSS code:

   tr {
    background: white;
}

tr:nth-child(4n+1) {
    background: blue;
}

tr:nth-child(4n+2) {
    background: blue;
}

If you apply this CSS to a table with alternating A and B values in the rows, it will result in a pattern where every 4th row has a blue background.

Answer №2

Here are the selectors that will help you achieve your desired outcome:

tr {
  background: blue;
}

tr:nth-child(4n),
tr:nth-child(4n-1) {
  background: white;
}
<table>
  <tr><td>Row</td></tr>
  <tr><td>Row</td></tr>
  <tr><td>Row</td></tr>
  <tr><td>Row</td></tr>
  <tr><td>Row</td></tr>
  <tr><td>Row</td></tr>
  <tr><td>Row</td></tr>
  <tr><td>Row</td></tr>
  <tr><td>Row</td></tr>
  <tr><td>Row</td></tr>
  <tr><td>Row</td></tr>
  <tr><td>Row</td></tr>
  <tr><td>Row</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

Tips for effectively utilizing the display: inline property in conjunction with ng-repeat

I am struggling to create a timeline with a broken structure on my website. I suspect that the issue lies in using display:inline. When attempting to apply this to my site: https://i.stack.imgur.com/4Ur7k.png the layout gets distorted: https://i.stack.i ...

javascriptcssangularjshtml

Rotate Text in HTML <thead> Tag

I need assistance with rotating a table header. https://i.stack.imgur.com/hcvxx.png The HTML th elements within the thead section are described as follows: <th> <span class="rotate-all">Period</span> </th> <th> < ...

javascripthtmlcss

What other option can be used in place of white-space:nowrap?

When using a textarea with the CSS property white-space:nowrap, it successfully removes spaces but adds a horizontal scrollbar to the text. I want to avoid the horizontal scrollbar while also preventing scrolling using arrow keys when using overflow-x:hi ...

jqueryhtmlcss

Placing a picture within a box that is 100% of the viewport height

After searching for a while, I still haven't found a solution to my problem. I am currently working on a Personal portfolio that has different sections with a height of 100vh each. However, I am facing difficulty in positioning the images within the s ...

htmlcss

In search of a dropline menu with a comparable style

My search for a menu like the one found on www.ultragraph.co.uk has been exhaustive. I have only come across simple dropline menus, but I am seeking one with hidden sub-menus that reveal upon mouseover similar to ultragraph.co.uk. If anyone has any sugge ...

javascripthtmlcssmenu

Eliminate certain inline styles using jQuery

I am facing an issue with an asp menu I am using. It is automatically inserting style="width:3px;" into my menu table tds, creating an unsightly gap between my tabs. Instead of asking our developer to customize the menu just to fix this cosmetic flaw, I am ...

jquerycssinline-styles

What is the best way to adjust inline svg to the user viewport size?

After working on integrating my interactive SVG maps into my HTML pages, I encountered a minor issue: when inserting my inline SVG into a standard, non-responsive HTML document, it automatically adjusts itself to fit nicely within the user's viewport. ...

htmlcsstwitter-bootstrapsvgsnap.svg

Floating CSS3 animations within HTML elements

I'm struggling to understand why the animated arrow on my website refuses to go behind the other elements. The animation code I've used for the arrow in CSS3 is as follows: -webkit-animation-fill-mode:both; -moz-animation-fill-mode:both; -ms-an ...

htmlcsscss-animations

Tips for customizing the appearance of jscrollpane in EasyUI

I need help customizing the jscrollpane style in EasyUI Frozen Columns for DataGrid. I've tried changing it using the following CSS: ::-webkit-scrollbar { width: 12px; } However, it doesn't seem to have any effect. ...

cssjscrollpanejquery-easyui

The appearance of the logout button may differ depending on the web browser being used

I have implemented a straightforward logout button using the following code: <li><a href="http://localhost:8666/web1/profile/mainpage/logout.php" onclick="return confirm('Are you sure to logout?');">Log Out</a>&l ...

javascriptphpjqueryhtmlcss

Ways to prevent blank class from occupying space until filled with Javascript

I've been working on a checkout calculator using JavaScript, and here's how I'm inputting the data: <p class="car-rent-class-info h6 pb-1"></p> <p class="car-rent-pickupdropoff-info h6 pb-1"></p> <p class="car-ren ...

htmlcss

Tips for hiding the overflow scrollbar on Microsoft Chrome when there is no content to scroll

Looking for a solution to hide scroll bars in Microsoft Chrome, but only when there is no content to scroll? The current div and styles always show the horizontal and vertical scroll bars, even when the height exceeds the content. <div style="backgroun ...

javascripthtmlcss

The background color and border are not showing up in the <div> element

I am encountering an issue with 3 inline <div> elements where the one on the far left is not displaying the light blue background and black border that it should have. HTML: <!DOCTYPE html> </html> <head> <link rel= ...

htmlcss

Spinning text within a circular rotation in CSS

Looking for guidance on how to center the "hallo" text inside a circle? Currently experiencing issues with the circle display in IE8 and Firefox. Any suggestions on how to fix this would be greatly appreciated. And here is the link to my code snippet: CSS ...

javascripthtmlcss

In mobile view, the grid text should be positioned on top of the input field

Created a basic grid layout with input fields. Everything looks fine on the PC, but on mobile devices, long text causes the input field to be positioned below the text. However, when the text is short like Lor, it appears next to the input field... I want ...

htmlcssgrid

A reliable cross-browser solution for CSS sticky positioning

I designed a layout with 1 header and 3 vertical panels. The challenge is to ensure that all the panels can expand or contract horizontally to fill up 100% of the page width collectively, while also taking up 100% of the vertical space below the header (wh ...

cssflexboxcss-positionsticky

Can you provide guidance on how to perfectly align a div within another div both vertically and horizontally?

Similar Inquiry: Method to center an image both vertically and horizontally within a larger div I'm working on positioning a div that is 300px in both height and length. My goal is to have another div inside it, sized at 100px for both dimensions ...

htmlcss

Increasing the size of a background image as you scroll

Is there a way to adjust the background image of a div so that it scales according to the amount the page is scrolled? The current implementation works fine on desktop screens, but on mobile screens, the height of the background image reduces and the image ...

javascripthtmlcss

What is the best way to incorporate a unique font with special effects on a website?

Is there a way to achieve an Outer Glow effect for a non-standard font like Titillium on a website, even if not everyone has the font installed on their computer? I'm open to using Javascript (including jQuery) and CSS3 to achieve this effect. Any sug ...

javascriptfontscss

"Major issues arise as CSS3 Animation fails to function properly across all web

I have been experimenting with using a sprite and CSS3 animation to create a rollover effect. While it seems to be working in CODA 2, I'm encountering issues when testing in Mozilla, Chrome, Safari, and Opera as the animation fails to trigger. /*link ...

cssspritecss-animations