How to set color for ODD and EVEN rows in HTML Table using CSS | ASPMANTRA | Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server AND WCF 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>
   

Post a Comment

[blogger]

MKRdezign

Contact Form

Name

Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget