Skip to main content

How to create stylist table in html and css?


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

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