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 use inner html value or data in php from javascript(innerHTML)?

 use inner html value or data in php from javascript(innerHTML)? <html> <body> <p id="demo">use inner html value in php(innerhtml)</p> <script>   var jassi = document.getElementById("demo").innerHTML;   //document.write(jassi); </script> <?php $jassi = '<script>document.write(jassi);</script>'; echo $jassi; ?> </body> </html>
Post a Comment
Read more

How to get store data from WCFM(Best Multi Vendor Marketplace) Plugin?

 Get store data from WCFM(Best Multi Vendor Marketplace) Plugin. global $WCFM, $WCFMmp, $wp, $WCFM_Query, $post; $store_id = ''; if ( isset( $attr['id'] ) && !empty( $attr['id'] ) ) { $store_id = absint($attr['id']); } if (  wcfm_is_store_page() ) { $wcfm_store_url = get_option( 'wcfm_store_url', 'store' ); $store_name = apply_filters( 'wcfmmp_store_query_var', get_query_var( $wcfm_store_url ) ); $store_id  = 0; if ( !empty( $store_name ) ) { $store_user = get_user_by( 'slug', $store_name ); } $store_id    = $store_user->ID; } $user_id = $store_id;  $vendor_data = get_user_meta( $user_id, 'wcfmmp_profile_settings', true ); $street_1 = $vendor_data['address']['street_1']; $street_2 = $vendor_data['address']['street_2']; $city     = $vendor_data['address']['city']; $zip      = $vendor_data['address']['zip&#
Post a Comment
Read more

How to create login with phone number in woocommerce wordpress?

Create login with phone number in woocommerce wordpress. function wooc_extra_register_fields() {?>        <p class="form-row form-row-wide">        <label for="reg_billing_phone"><?php _e( 'Phone', 'woocommerce' ); ?><span class="required">*</span></label>        <input type="text" class="input-text" name="billing_phone" id="reg_billing_phone" value="<?php esc_attr_e( $_POST['billing_phone'] ); ?>" />        </p>            <?php  }  add_action( 'woocommerce_register_form_start', 'wooc_extra_register_fields' );  function wooc_validate_extra_register_fields( $username, $email, $validation_errors ) { if ( isset( $_POST['billing_phone'] ) ) {    $hasPhoneNumber= get_users('meta_value='.$_POST['billing_phone']);    if ( !empty($hasPhoneNumber)) {      $validation_er
Post a Comment
Read more