Popular table design with hover effect
<html>
<head>
<style>
.container{
margin:auto;
width:80%;
}
.main-row{
width:20%;
float:left;
background-color:#f1f1f1;
text-align:center;
padding:10px 0px;;
}
.col-2{
width:20%;
float:left;
text-align:center;
padding:10px 0px;
border-bottom:1px solid #f1f1f1;
}
.row{
width:100%;
float:left;
border-bottom:1px solid #f1f1f1;
}
.row:hover{
width:100%;
float:left;
background-color:#f1f1f1;
}
a.link {
color:black;
}
</style>
</head>
<body>
<div class="container">
<div class="main">
<div class="main-row">Name</a></div>
<div class="main-row">City</div>
<div class="main-row">Class</div>
<div class="main-row ">Roll no.</div>
<div class="main-row ">Friend</div>
</div>
<div class="row">
<a href="#" class="link">
<div class="col-2">Jaspreet singh</div>
<div class="col-2">Sangrur</div>
<div class="col-2">+2</div>
<div class="col-2 ">20</div>
<div class="col-2 ">harpreet</div>
</a>
</div>
<div class="row">
<a href="#" class="link">
<div class="col-2">Jaspreet singh</div>
<div class="col-2">Sangrur</div>
<div class="col-2">+2</div>
<div class="col-2 ">20</div>
<div class="col-2 ">harpreet</div>
</a>
</div>
<div class="row">
<a href="#" class="link">
<div class="col-2">Jaspreet singh</div>
<div class="col-2">Sangrur</div>
<div class="col-2">+2</div>
<div class="col-2 ">20</div>
<div class="col-2 ">harpreet</div>
</a>
</div>
<div class="row">
<a href="#" class="link">
<div class="col-2">Jaspreet singh</div>
<div class="col-2">Sangrur</div>
<div class="col-2">+2</div>
<div class="col-2 ">20</div>
<div class="col-2 ">harpreet</div>
</a>
</div>
</div>
</html>
Comments
Post a Comment