Last active
March 7, 2018 18:34
-
-
Save allenhwkim/1b228c8bf888786de89c5309abe7b4e7 to your computer and use it in GitHub Desktop.
Responsive Table https://rawgit.com/allenhwkim/1b228c8bf888786de89c5309abe7b4e7/raw/45e877f2e7c12581d07e2ffaf2beb1130690f9a8/responsive-table.html
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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset='UTF-8'> | |
| <title>Responsive Table</title> | |
| <style> | |
| table.responsive { width: 100%; border-collapse: collapse} | |
| table.responsive tr { border: 1px solid #ccc;} | |
| table.responsive tr:nth-child(odd) { background-color: #eee;} | |
| table.responsive th, table.responsive td { text-align: left; padding: 12px;} | |
| @media only screen and (max-width: 760px) { | |
| /* Force table to not be like tables anymore */ | |
| table.responsive, | |
| table.responsive thead, | |
| table.responsive tbody, | |
| table.responsive th, | |
| table.responsive td, | |
| table.responsive tr { | |
| display: block; | |
| } | |
| /* Hide table headers (but not display: none;, for accessibility) */ | |
| table.responsive thead tr { | |
| position: absolute; | |
| top: -9999px; | |
| left: -9999px; | |
| } | |
| table.responsive td { | |
| display: flex; | |
| align-items: center; | |
| border: none; | |
| border-bottom: 1px solid #ddd; | |
| } | |
| table.responsive td:before { | |
| display: flex; | |
| align-items: center; | |
| width: 50%; | |
| font-weight: bold; | |
| content: attr(title); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <table class="responsive"> | |
| <thead> | |
| <tr> | |
| <th>First Name</th> | |
| <th>Last Name</th> | |
| <th>Job Title</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td title="First Name">James</td> | |
| <td title="Last Name">Matman</td> | |
| <td title="Job Title">Chief Sandwich Eater</td> | |
| </tr> | |
| <tr> | |
| <td title="First Name">The</td> | |
| <td title="Last Name">Tick</td> | |
| <td title="Job Title">Crimefighter Sorta</td> | |
| </tr> | |
| <tr> | |
| <td title="First Name">The</td> | |
| <td title="Last Name">Tick</td> | |
| <td title="Job Title">Crimefighter Sorta</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </body> | |
| </html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment