Change background color in 2nd and 3rd columns and odd rows with CSS :nth-child(even/odd) - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:3 Column

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. 3 Column

Description

Change background color in 2nd and 3rd columns and odd rows with CSS :nth-child(even/odd)

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>

tr:nth-child(even) {
   background-color: red;
}
tr:nth-child(odd) {
   background-color: yellow;
}
tr:first-child {<!--from   ww  w  .j a  va 2s  .  com-->
   background-color: blue;
}
tr:last-child {
   background-color: green;
}


      </style> 
 </head> 
 <body translate="no"> 
  <table> 
   <tbody> 
    <tr> 
     <td>test</td> 
     <td>test</td> 
     <td>asdfadf</td> 
    </tr> 
    <tr> 
     <td>test</td> 
     <td>test</td> 
     <td>adsfasdf</td> 
    </tr> 
    <tr> 
     <td>adsfasdf</td> 
     <td>test</td> 
     <td>test</td> 
    </tr> 
    <tr> 
     <td>adsfasdf</td> 
     <td>test</td> 
     <td>test</td> 
    </tr> 
    <tr> 
     <td>adsfasdf</td> 
     <td>test</td> 
     <td>test</td> 
    </tr> 
    <tr> 
     <td>adsfasdf</td> 
     <td>test</td> 
     <td>test</td> 
    </tr> 
    <tr> 
     <td>adsfasdf</td> 
     <td>test</td> 
     <td>test</td> 
    </tr> 
   </tbody> 
  </table>  
 </body>
</html>

Related Tutorials