Differentiating CSS Styles for Odd and Even Table Elements

Question

Differentiating CSS Styles for Odd and Even Table Elements

I am trying to implement a style where every other row in my table (myrow) has a different background color. However, currently it is only showing the color specified for odd rows.

.myrow, .myrow:nth-of-type(odd) + .myrow:nth-of-type(even) ~ .myrow:nth-of-type(odd) {
       background: #f8f8f8;;     
    }

    .myrow:nth-child(even),.myrow:nth-child(even) ~ .myrow:nth-of-type(odd), 
    .myrow:nth-child(even) + .myrow:nth-child(odd) ~ .myrow:nth-of-type(even){ 
       background: blue; 
    }

    <table class="col-xs-12 col-sm-12 col-md-12 col-lg-12 main-table "> 
    <ng-container *ngFor="let r of results">
      <tr class="myrow">
         <div class="row>
             <div class="col-xs-12 col-sm-12 col-md-11 col-lg-11">
              <table class="wd-100 bus-table">
                  <tr></tr>
              </table>
             </div>
         </div
      </tr>
    </ng-container>
    </table>

html css

Answer 1

Answer №1

table {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

table tr.myrow:nth-child(even) {
  background: blue;
}

table tr.myrow:nth-child(odd) {
  background: #f8f8f8;
}

table tr.myrow:hover {
  background-color: #ddd;
}

Answer 2

table {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

table tr.myrow:nth-child(even) {
  background: blue;
}

table tr.myrow:nth-child(odd) {
  background: #f8f8f8;
}

table tr.myrow:hover {
  background-color: #ddd;
}

Answer 3

Answer №2

give this code a shot

Select every even child using CSS

table {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

table tr:nth-child(even) {
  background: blue;
}

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

table tr:hover {
  background-color: #ddd;
}

<table class="col-xs-12 col-sm-12 col-md-12 col-lg-12 main-table ">
  <ng-container *ngFor="let r of results">
    <tr class="myrow">
      <div class="row">
        <div class=" col-xs-12 col-sm-12 col-md-11 col-lg-11 ">
          <table class="wd-100 bus-table ">
            <tr>
              <td>a</td>
              <td>b</td>
            </tr>
            <tr>
              <td>a</td>
              <td>b</td>
            </tr>
          </table>
        </div>
      </div>
    </tr>
  </ng-container>
</table>

Answer 4

give this code a shot

Select every even child using CSS

table {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

table tr:nth-child(even) {
  background: blue;
}

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

table tr:hover {
  background-color: #ddd;
}

<table class="col-xs-12 col-sm-12 col-md-12 col-lg-12 main-table ">
  <ng-container *ngFor="let r of results">
    <tr class="myrow">
      <div class="row">
        <div class=" col-xs-12 col-sm-12 col-md-11 col-lg-11 ">
          <table class="wd-100 bus-table ">
            <tr>
              <td>a</td>
              <td>b</td>
            </tr>
            <tr>
              <td>a</td>
              <td>b</td>
            </tr>
          </table>
        </div>
      </div>
    </tr>
  </ng-container>
</table>

Differentiating CSS Styles for Odd and Even Table Elements

Answer №1

Answer №2

Similar questions

"Implementing a consistent body border design on all pages using CSS for print media

One potential solution to reorganizing the layout is to utilize two rows instead of just one

Improving ASP.NET MVC 4 output by bundling whitespace and formatting

Only the initial value is being processed in the for loop using Javascript

Ensuring Radiobuttons are Selected on a Page After Clicking the Submit Button

Learn the process of utilizing Uglify.js to combine JavaScript files for individual views within Express.js

What are the best methods for aligning pseudo elements vertically?

Ways to layer two divs on each other and ensure button functionality is maintained

Having trouble with looping the CSS background using JavaScript in CodePen

What is the process for updating the background image in Ionic?

The data table appears to be malfunctioning when the table collapses

Create a table by incorporating the information from the page along with additional content

What is the equal tr of CSS?

implementing jquery typewriter plug-in for a responsive bootstrap image

Multiple buttons in a single field

Embed schema information into HTML tags using JavaScript

Creating a WordPress widget that links to a local file

The navigation bar in Bootstrap 3.2 expands in size as you scroll past it

Adjust the position of the IMG to the left side

Switching the typeface within the content data