Showing posts with label Responsive Design. Show all posts
Showing posts with label Responsive Design. Show all posts

Making a table fully Responsive

1000% pure css way to make a table responsive:
Click here to see live demo
Sample code

<!DOCTYPE>
<html>
<head>
<title>Responsive Table</title>
<meta name="" content="">

</head>
<body>

<div class="container">
<div class="tablewrapper">
 <table  class="responsive" width="98%" cellpadding="4" cellspacing="1" border="1">
  <tr> 
   <td>Name</td> 
   <td>Email</td> 
   <td>Phone</td> 
   <td>Address</td> 
   <td>Contact</td> 
   <td>Mobile</td> 
   <td>Office</td> 
   <td>Home</td> 
   <td>Residency</td>
   <td>Height</td> 
   <td>Weight</td> 
   <td>Color</td> 
   <td>Desease</td>
   <td>Extra</td> 
   <td>DOB</td> 
   <td>Nick Name</td> 
  </tr>
  <tr> 
   <td>John Doe</td> 
   <td>john.doe@gmail.com</td>
   <td>Street no. 9, Park Plaza</td> 
   <td>London</td> 
   <td>-</td> 
   <td>7777777777</td> 
   <td>022-666666</td> 
   <td>-</td> 
   <td>U.K.</td>
   <td>165cm</td>
   <td>58kg</td> 
   <td>bright</td>
   <td>--</td> 
   <td>--</td>
   <td>03/07/1986</td> 
   <td>John</td> 
  </tr>
  <tr> 
   <td>John Doe</td> 
   <td>john.doe@gmail.com</td>
   <td>Street no. 9, Park Plaza</td> 
   <td>London</td> 
   <td>-</td> 
   <td>7777777777</td> 
   <td>022-666666</td> 
   <td>-</td> 
   <td>U.K.</td>
   <td>165cm</td>
   <td>58kg</td> 
   <td>bright</td>
   <td>--</td> 
   <td>--</td>
   <td>03/07/1986</td> 
   <td>John</td> 
  </tr>

   <tr> 
   <td>John Doe</td> 
   <td>john.doe@gmail.com</td>
   <td>Street no. 9, Park Plaza</td> 
   <td>London</td> 
   <td>-</td> 
   <td>7777777777</td> 
   <td>022-666666</td> 
   <td>-</td> 
   <td>U.K.</td>
   <td>165cm</td>
   <td>58kg</td> 
   <td>bright</td>
   <td>--</td> 
   <td>--</td>
   <td>03/07/1986</td> 
   <td>John</td> 
  </tr>
  <tr> 
   <td>John Doe</td> 
   <td>john.doe@gmail.com</td>
   <td>Street no. 9, Park Plaza</td> 
   <td>London</td> 
   <td>-</td> 
   <td>7777777777</td> 
   <td>022-666666</td> 
   <td>-</td> 
   <td>U.K.</td>
   <td>165cm</td>
   <td>58kg</td> 
   <td>bright</td>
   <td>--</td> 
   <td>--</td>
   <td>03/07/1986</td> 
   <td>John</td> 
</tr>
</table>
</div>
</div>
</body>
</html>

This code will look like this




Responsive Table





Name Email Phone Address Contact Mobile Office Home Residency Height Weight Color Desease Extra DOB Nick Name
John Doe john.doe@gmail.com Street no. 9, Park Plaza London - 7777777777 022-666666 - U.K. 165cm 58kg bright -- -- 03/07/1986 John
John Doe john.doe@gmail.com Street no. 9, Park Plaza London - 7777777777 022-666666 - U.K. 165cm 58kg bright -- -- 03/07/1986 John
John Doe john.doe@gmail.com Street no. 9, Park Plaza London - 7777777777 022-666666 - U.K. 165cm 58kg bright -- -- 03/07/1986 John




No comments:

Bootstrap Responsive Drop Down Navigation

Now a days everybody want his/her site to make fully responsive even navigation menus too. Why ? Very simple! Because it delivers your content to all kind of viewers desktop/tablets/mobile/iphone. 

So how to make them responsive? Ya, there are several solutions/frameworks available, most popular is bootstrap frontend framework(personaly I prefer it most). What's the bootstrap? Bootstrap is a framework based on 12 grid system originaly developed by @mdo and @fat in Twitter. 

Ok i'll  explain how to make a responsive navigation menu by a simple example. 

Put these between head tags to make it responsive.

Now html part

<div class="navbar navbar-inverse"> 
   <div class="navbar-inner">  
   <div class="container">   
    <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-inverse-collapse">
        <span class="icon-bar"> </span>
        <span class="icon-bar"> </span>
        <span class="icon-bar"> </span>
      </a>   
   <a href="https://www.cruzersoftwares.com/myexpense/" class="brand"> Expense Manager</a>
   
    <div class="nav-collapse collapse navbar-inverse-collapse">  
    <ul class="nav ">   
     <li class="dropdown "> 
 <a href="users" class="dropdown-toggle" data-toggle="dropdown"> Users 
<i class="caret"> </i> </a>
      <ul class="dropdown-menu mydropdown">   
       <li> <a href="users/add" class="linkmain"> Add Users </a> </li>
       <li> <a href="users/" class="linkmain"> Manage Users </a> </li>
      </ul>  
     </li>
     <li class="dropdown ">
<a href="users" class="dropdown-toggle" data-toggle="dropdown"> 
Users <i class="caret"> </i> </a>
      <ul class="dropdown-menu mydropdown">   
       <li> <a href="users/add" class="linkmain"> Add Notes </a> </li>
       <li> <a href="users/" class="linkmain"> Manage Notes </a> </li>
      </ul> 
     </li>
    </ul>  
    <ul class="nav pull-right">   
     <li class="active"> 
<a href="users/login"> Login to add your expense </a></li>
    </ul>   
   </div>
        </div> 
    </div>
 </div>

Now your navigation is ready.


No comments:
Subscribe to: Posts (Atom)