How to set color for ODD and EVEN rows in HTML Table using CSS - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

How to set color for ODD and EVEN rows in HTML Table using CSS

In this article I am going to explain how to set alternate color for ODD and EVEN rows in HTML Table using CSS.

How to set color for ODD and EVEN rows in HTML Table using CSS




Description:
I want to set alternate color on rows in HTML table. We can set using odd and even nth child selector.






Implementation:

Add the below given code in stylesheet:

/*background color for all the ODD background rows  */
     tr:nth-child(odd) {
        background: #b8d1f3;
    }
    /*background color for all the EVEN background rows  */
     tr:nth-child(even) {
        background: #dae5f4;
    }
     /*background color for all the ODD rows hover */
     tr:nth-child(odd):hover {
        background: #588dbb;
        color:#fff;
    }
    /*background color for all the EVEN rows hover */
     tr:nth-child(even):hover {
        background: #8994a2;
        color:#fff;
    }

I have created an example.
Complete HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">  
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
     <script>
         var app = angular.module('MyForm', []);
         app.controller('myCtrl', function ($scope, $http) {                      
             $scope.userList = [
            { "Name": "John", "Email": "John@gmail.com", "src": "images/image.jpg" },
            { "Name": "Vinod", "Email": "Vinod@yahoo.com", "src": "images/img1.jpg" },
            { "Name": "Steve", "Email": "Steve@hotmail.com", "src": "images/img2.jpg" },
            { "Name": "Dan", "Email": "Dan@rock.com", "src": "" },
            { "Name": "Jonshan", "Email": "", "src": "images/img3.jpg" },
            { "Name": "Rocky", "Email": "Rocky@rocks.com", "src": "images/pic.jpg" },
            { "Name": "Santhom", "Email": "", "src": "" }
            ];           
         }); 
   </script> 
<style>
    table{margin-top:50px;}
    table tr td {
        text-align: center  !important;
        border:none;
    }
    img{    padding: 5px;}
    table thtext-align: center!important;
    border-bottom: 2px solid #000;padding:5px;}
    .ng-binding {
        padding: 40px;
    }
     a {
        text-decoration: none;
        color: #2196F3;
    }
    /*background color for all the ODD background rows  */
     tr:nth-child(odd) {
        background: #b8d1f3;
    }
    /*background color for all the EVEN background rows  */
     tr:nth-child(even) {
        background: #dae5f4;
    }
     /*background color for all the ODD rows hover */
     tr:nth-child(odd):hover {
        background: #588dbb;
        color:#fff;
    }
    /*background color for all the EVEN rows hover */
     tr:nth-child(even):hover {
        background: #8994a2;
        color:#fff;
    }
</style>
</head>
<body ng-app="MyForm"> 
   <div ng-controller="myCtrl">      
       <center><table> 
         <thead> 
           <tr> 
           <th><a href="" ng-click="sortType='Name';reverse=!reverse">Name</a></th>
    <th><a href="" ng-click="sortType='Email';reverse=!reverse">Email</a></th>
             <th></th> 
           </tr> 
         </thead> 
         <tbody> 
      
               <tr ng-repeat="user in userList|orderBy:sortType:reverse"> 
         
             <td>{{ user.Name}}</td> 
            
             <td>{{user.Email || 'Email Not Available'}}</td>
             <td><img ng-src={{user.src||'images/image.jpg'}} alt="" title="{{user.Name}}" width="150" height="150" /></td>
           </tr> 
         </tbody> 
       </table> 
</center>
     </div>    
 </body> 
</html>
   

What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon