Set alternate color for nth child for First TD in each row - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Table Row

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Table Row

Description

Set alternate color for nth child for First TD in each row

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

table tr:nth-child(even) td:first-child {
   background:#0068b3
}
table tr:nth-child(odd) td:first-child {
   background:#aebde1
}


      </style> 
 </head> <!--from w w  w .  j  a v  a  2 s .  co m-->
 <body> 
  <table> 
   <tbody> 
    <tr> 
     <td>#0068b3</td> 
     <td>#fff</td> 
     <td>#fff</td> 
    </tr> 
    <tr> 
     <td>#aebde1</td> 
     <td>#fff</td> 
     <td>#fff</td> 
    </tr> 
    <tr> 
     <td>#0068b3</td> 
     <td>#fff</td> 
     <td>#fff</td> 
    </tr> 
    <tr> 
     <td>#aebde1</td> 
     <td>#fff</td> 
     <td>#fff</td> 
    </tr> 
   </tbody> 
  </table>  
 </body>
</html>

Related Tutorials