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:

Post a Comment

Subscribe to: Post Comments (Atom)