CODEWITHSUNDEEP
htmlcsshtml-table
TigerDave
TigerDave

Reputation: 65

Placing tr:nth-child(even) inside a table tag

I am trying to put a tr:nth-child(even) inside a table tag. I do not want it global.

EXAMPLE: 

<table style= "{tr:nth-child(even) = background-color: #c2ddf2;}"> 
   <tr><th>One</th><th>Two</th><th>Three</th><th>Four</th></tr>
   <tr><th>this</th><th>should</th><th>be different</th><th>colors</th></tr>
   <tr><th>this should</th><th>be same</th><th>colors as</th><th>first row</th></tr>
</table>

Upvotes: 0

Views: 2884

Answers (3)

izulito
izulito

Reputation: 477

You cant style pseudo element with inline css. Here is how you can do that.

.table tr:nth-child(even){
  background: #ccc;
}
<table class="table"> 
   <tr><th>One</th><th>Two</th><th>Three</th><th>Four</th></tr>
   <tr><th>this</th><th>should</th><th>be different</th><th>colors</th></tr>
   <tr><th>this should</th><th>be same</th><th>colors as</th><th>first row</th></tr>
</table>

Upvotes: 1

Sanchit Patiyal
Sanchit Patiyal

Reputation: 4920

Pseudo-classes can't be set in the style attribute. Instead, you can give a class to table and do like this 

.table1 tr:nth-child(even) { background-color: #c2ddf2;}
<table class="table1" > 
   <tr><th>One</th><th>Two</th><th>Three</th><th>Four</th></tr>
   <tr><th>this</th><th>should</th><th>be different</th><th>colors</th></tr>
   <tr><th>this should</th><th>be same</th><th>colors as</th><th>first row</th></tr>
</table>

Upvotes: 2

Maharkus
Maharkus

Reputation: 2898

Just add a class to the table and you're good to go!

.special tr:nth-child(even) {
background-color: #c2ddf2;
}
<table class="special"> 
   <tr><th>One</th><th>Two</th><th>Three</th><th>Four</th></tr>
   <tr><th>this</th><th>should</th><th>be different</th><th>colors</th></tr>
   <tr><th>this should</th><th>be same</th><th>colors as</th><th>first row</th></tr>
</table>
<hr>
<table class="notspecial"> 
   <tr><th>One</th><th>Two</th><th>Three</th><th>Four</th></tr>
   <tr><th>this</th><th>should</th><th>be different</th><th>colors</th></tr>
   <tr><th>this should</th><th>be same</th><th>colors as</th><th>first row</th></tr>
</table>

Upvotes: 2

Related Questions