In
this article I am going to explain how to set alternate color for ODD and EVEN
rows in HTML Table using CSS.
In
the previous article I have explained Form validation example using AngularJswith Bootstrap in MVC application, Sort and filter Grid using AngularJs in MVC,
how to search and highlight the matched text using Angularjs in MVC application
and how to insert, update, delete and show the data using AngularJs in asp.netMVC.
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 th{ text-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>
No comments:
Post a Comment