Skip to main content

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>

Comments

Post a Comment

Popular posts from this blog

How to check date format in PHP?

Check date format in PHP function isCorrectDateFromat($date){     if(!empty($date)){         $dateString = $date; // Replace this with your date string         $format = "Y-m-d"; // Replace this with your expected date format         $dateTime = DateTime::createFromFormat($format, $dateString);         if ($dateTime === false) { /*             echo "The date is not in the correct format."; */         } else {             $errors = DateTime::getLastErrors();             if (empty($errors)) { /*                 echo "The date is in the correct format."; */                 return true;             } else { /*                 echo "...
Post a Comment
Read more