Creating a zebra-striped list using CSS can be done by styling even and odd list items differently

I am facing an issue with Angularjs and the table tag when using group loops. The problem arises in achieving correct zebra striping for the list. How can I solve this to ensure the zebra pattern is applied correctly?

<table>
<tbody>
    <tr><td>aaaaaaaa</td></tr>
    <tr><td>aaaaaaaa</td></tr>
</tbody>
<tbody>
    <tr><td>bbbbbbbb</td></tr>
</tbody>
    <tr><td>bbbbbbbb</td></tr>
<tbody>
    <tr><td>aaaaaaaa</td></tr>
</tbody>
<tbody>
    <tr><td>aaaaaaaa</td></tr>
    <tr><td>bbbbbbbb</td></tr>
</tbody>   
<tbody>
    <tr><td>bbbbbbbb</td></tr>
    
    <tbody>
    <tr><td>aaaaaaaa</td></tr>
    </tbody>
    <tbody>
    <tr><td>aaaaaaaa</td></tr>
    </tbody>
    <tbody>
    <tr><td>bbbbbbbb</td></tr>
    </tbody>
    <tbody>
    <tr><td>bbbbbbbb</td></tr>
    </tbody>
</table>

table tbody tr:nth-child(4n-1), table tbody tr:nth-child(4n+1)  {
    background: #ccc;
}

The current solution is not working as expected..

cssangularjs

Answer №1

Consider using the tbody element at the start and end of a table to avoid repetition with every row. The use of tbody signifies the table body, while thead represents the table head, meaning a table should have one body.

table tbody tr:nth-child(2n)  {
    background: #ccc;
}
<table>
<tbody>
    <tr><td>aaaaaaaa</td></tr>
    <tr><td>aaaaaaaa</td></tr>
    <tr><td>bbbbbbbb</td></tr>
    <tr><td>bbbbbbbb</td></tr>
    <tr><td>aaaaaaaa</td></tr>
    <tr><td>aaaaaaaa</td></tr>
    <tr><td>bbbbbbbb</td></tr>  
    <tr><td>bbbbbbbb</td></tr>
    <tr><td>aaaaaaaa</td></tr>
    <tr><td>aaaaaaaa</td></tr>
    <tr><td>bbbbbbbb</td></tr>
    <tr><td>bbbbbbbb</td></tr>
</tbody>
</table>

Answer №2

CHOICE 1

If you find yourself needing to style the HTML layout without altering its structure, particularly if it's being dynamically loaded and inaccessible for editing, consider incorporating a few lines of JavaScript, like this:

var allTheTrs = document.querySelectorAll('tr');

for(var [index,tr] of allTheTrs.entries()){
if(index % 2 == 1){
    tr.classList.add('color-me');
}
}
.color-me {
background: pink;
}
 ... table code here ...

CHOICE 2

If editing the HTML is an option, consider nesting all <trs> within a single <tbody>, as demonstrated below:

<table>
<tbody>
... nested tr elements here ...
</tbody>
</table>

Then apply this CSS rule to target either odd or even children:

table tr:nth-child(odd){
background: pink;
}

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

Unlimited Angular Digest Loop Caused by promise.then()

The issue: The usage of this.promise.then(function(){}) function within a controller method appears to lead to an infinite digest loop on $rootScope, even though the returned value remains constant. It should be noted that removing the .then() line elimina ...

angularjspromise

What is the best way to display a div beneath the highlighted text within a textarea field?

I have encountered a situation where I want to display a div (like a popup) when text is selected in a text area. However, when using mouse-down for this action, the position of the div sometimes does not align directly below the selected text. Below is t ...

javascriptjquerycss

sequentially animating elements using animate css in a choreographed manner

I have created a unique jsfiddle with 20 boxes that I am trying to animate using the Animate.css plugin. The plugin can be found at daneden.me/animate. My goal is to animate each box one after the other in a sequential manner, but I seem to be having trou ...

javascriptjquerycsscss-transitions

The ng-disabled directive in AngularJS fails to disable the button as expected

I'm having an issue with setting an input button to disabled when a user selects a specific value from a select box: Here is my select menu: <select id="jobstatus" name="jobstatus" ng-model="associate.JobStatus" class="form-control"> & ...

javascriptangularjs

Modify the button's border color upon click action

I am looking to implement a feature where the border of a button changes when clicked once and reverts back when clicked again. This should apply individually to each of the 16 buttons with the same class. Additionally, I want to enable the ability to clic ...

javascriptjqueryhtmlcss

Arrange text boxes within a form and table to be in alignment with the labels

https://i.stack.imgur.com/MFQnD.png I'm facing difficulty aligning checkboxes with labels within a form and a table. Despite reviewing various answers and websites, I am still unable to achieve the desired alignment. How to consistently align check ...

htmlcsscheckboxlabel

What steps should be taken to acquire the most recent CSS files for a theme?

We are facing an issue with implementing a versioning system for our CSS files. Currently, we append a build number to the CSS link programmatically (e.g. \themes\ssss\abc.css?1011) so that clients always receive the latest CSS files with ea ...

asp.net.nethtmlcss

Align the font-awesome icon in the middle of the input box vertically

Is there a way to vertically center the font-awesome icon inside an input box using Bootstrap without setting margins, padding values, or adjusting the height of the input? .inset-0 { top: 0; right: 0; bottom: 0; left: 0; } .inset-y-0 { top: ...

cssbootstrap-4

Organizing an Ordered List of Items into Alternating Columns Using HTML

I am in the process of developing a responsive HTML design to showcase an array of organized data. For smaller screens, the layout will consist of a single column displaying items sequentially. However, on larger screens, the design should adapt to featur ...

cssarrayshtml

In React, CSS @media queries are specifically designed to function only within the Device Mode of Developer Tools

As indicated by the title, I have designed a responsive web app using the React framework along with various @media queries. When I resize the page in Developer Tools' Device Mode, the queries work perfectly fine and everything functions as expected. ...

javascripthtmlcssreactjs

What is the effect of SEO on the use of image width and height attributes for a responsive website

Is it true that setting inline width and height for all images is beneficial for SEO and can improve site loading speed? Here's an example: <img src="http://www.example.com/images/free-size.jpg" width="200" height="400" alt="random image" /> E ...

htmlcssperformanceseo

Switch input-lg to input-sm in Bootstrap3 for smaller screens

One of my challenges is incorporating Twitter Bootstrap’s input-lg class on all input fields. I am wondering if there is a way, possibly utilizing JavaScript, to seamlessly switch to Twitter Bootstrap's input-sm class on smaller screens. This would ...

twitter-bootstrapcssmedia-queries

I am encountering an issue where the characters "£" is displaying as "£" when my HTML is rendered. Can anyone explain why this is happening?

Here is the code I'm having trouble with: http://pastebin.com/QBLeLyNq. For some reason, the "code" part isn't working correctly. Any help would be appreciated. I used to run a small business and had a profit of £145 with an investment of only ...

htmlcssencoding

Switching between Login Form and Register Form in VueJS template

Recently, I attempted to switch between the 'Login Form' and 'Register Form' using code that I found on codepen Flat HTML5/CSS3 Login Form. While the code functioned properly on its own, when integrated into a Vue Template, the form fai ...

javascriptjqueryhtmlcssvue.js

Is there a way to specifically dictate the order in which flexbox items expand or contract?

I am facing an issue with my flex container setup involving three children elements. I have specified both minimum and maximum widths for each child, but I want them to grow or shrink in a specific order as the window width changes. Ideally, Item1 should s ...

cssreactjsflexbox

Ensure that Colorbox remains centrally positioned even while scrolling

I have noticed a difference in behavior between thickbox and colorbox when it comes to scrolling. Thickbox always stays centered on the screen even when the user scrolls vertically, while colorbox fades out and leaves just a grayed background. Is there a w ...

javascriptcsscolorbox

Is it better to apply the font-family to the body or to the html element?

Is it more appropriate to specify the font-family CSS property on the html element or the body element? html { font-family: sans-serif; } or body { font-family: sans-serif; } I've looked into this issue online, but there doesn't seem to ...

htmlcss

Cover the entire screen with a solid background color and adjust the text size accordingly

I'm encountering two issues. Despite my efforts to adjust multiple containers, the background colour #eee simply won't reach the bottom of the screen. I've even tried setting the HTML height to 100%, but to no avail. Even though I&apos ...

htmlcsstwitter-bootstrap

Obtain the Upload URL using an Angular service

I am currently working on an Angular project that uses Dropzone.js as the drag-and-drop file upload component. The challenge I'm facing is that Azure requires a unique URL to be generated for each file upload. Dropzone.js has a "url" config option th ...

angularjsdropzone.js

To achieve two-way binding with a scope variable, it is necessary to enclose it within an

I am in need of creating a basic search feature for some items. I have designed a simple control with a button that clears the search query: <div class="item item-input item-button-right"> <i class="icon ion-ios-search placeholder-icon">&l ...

javascriptangularjsangularjs-scopeionic-framework