Scroll to top

How to create stylish table with CSS :nth-child() Selector with easy-way?

create table with CSS :nth-child() Selector

<html>

<head>

<style>

.container{

 margin:auto;

 width:80%;

}

.main-row{

 width:20%;

 float:left;

 background-color:#0AA52D;

 text-align:center;

 padding:10px 0px;
 color:white;

}

.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;

}

.row:nth-child(odd) {
  background:#f1f1f1;

</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>

Leave a Reply

Your email address will not be published. Required fields are marked *