Created
August 10, 2016 09:03
-
-
Save swapnilshrikhande/f40115961c54ade646b37e5a3082e732 to your computer and use it in GitHub Desktop.
Responsive Table
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <header> | |
| <style> | |
| body{color:#333;padding:1.5em} | |
| .responsive-new {border-collapse:collapse;width:100%} | |
| .responsive-new th{background-color:#eee;font-weight:700; } | |
| .responsive-new th,td{border-bottom: 1px solid #ddd; padding:5px; text-align:left} | |
| .fname{width:15%} | |
| .lname{width:15%} | |
| .mobile{width:20%} | |
| .add{width:30%;} | |
| .eml{width:20%;} | |
| tr{margin: 18px;} | |
| @media (max-width: 768px) { | |
| .responsive-new thead tr{position:absolute;top:-9999em;left:-9999em} | |
| .responsive-new tr{border:1px solid #ddd;} | |
| .responsive-new tr + tr{margin-top:1.5em} | |
| .responsive-new tr,td{display:block} | |
| .responsive-new td{border:none;border-bottom:1px solid #ddd; padding-left:50%} | |
| .responsive-new td:before{content:attr(data-label);display:inline-block;font-weight:700;line-height:1.5;margin-left:-100%;width:100%} | |
| } | |
| </style> | |
| </header> | |
| <body> | |
| <div class="table-responsive"> | |
| <table class="responsive-new"> | |
| <thead> | |
| <tr> | |
| <th class="fname">First Name</th> | |
| <th class="lname">Last Name</th> | |
| <th class="mobile">Mobile</th> | |
| <th class="add">Address</th> | |
| <th class="eml">Email</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td data-label="First Name">Sayali</td> | |
| <td data-label="Last Name">Bhambure</td> | |
| <td data-label="Mobile">57674634634</td> | |
| <td data-label="Address">when an unknown printer took a galley of type and scrambled</td> | |
| <td data-label="Email">[email protected]</td> | |
| </tr> | |
| <tr> | |
| <td data-label="First Name">Sayali</td> | |
| <td data-label="Last Name">Bhambure</td> | |
| <td data-label="Mobile">57674634634</td> | |
| <td data-label="Address">when an unknown printer took a galley of type and scrambled</td> | |
| <td data-label="Email">[email protected]</td> | |
| </tr> | |
| <tr> | |
| <td data-label="First Name">Sayali</td> | |
| <td data-label="Last Name">Bhambure</td> | |
| <td data-label="Mobile">57674634634</td> | |
| <td data-label="Address">when an unknown printer took a galley of type and scrambled</td> | |
| <td data-label="Email">[email protected]</td> | |
| </tr> | |
| <tr> | |
| <td data-label="First Name">Sayali</td> | |
| <td data-label="Last Name">Bhambure</td> | |
| <td data-label="Mobile">57674634634</td> | |
| <td data-label="Address">when an unknown printer took a galley of type and scrambled</td> | |
| <td data-label="Email">[email protected]</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment