The source code for the tutorial on
Last active
June 7, 2019 09:16
-
-
Save zhenyanghua/79225723deff5241775d18620e6ef275 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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>First Name</th> | |
| <th>Last Name</th> | |
| <th>Job Title</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td data-label="First Name">James</td> | |
| <td data-label="Last Name">Matman</td> | |
| <td data-label="Job Title">Chief Sandwich Eater</td> | |
| </tr> | |
| <tr> | |
| <td data-label="First Name">The</td> | |
| <td data-label="Last Name">Tick</td> | |
| <td data-label="Job Title">Crimefighter Sorta</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </body> | |
| </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
| /* | |
| Generic Styling, for Desktops/Laptops | |
| */ | |
| table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| } | |
| /* Zebra striping */ | |
| tr:nth-of-type(odd) { | |
| background: #eee; | |
| } | |
| th { | |
| background: #333; | |
| color: white; | |
| font-weight: bold; | |
| } | |
| td, th { | |
| padding: 6px; | |
| border: 1px solid #ccc; | |
| text-align: left; | |
| } | |
| /* | |
| Max width before this PARTICULAR table gets nasty | |
| This query will take effect for any screen smaller than 760px | |
| and also iPads specifically. | |
| */ | |
| @media | |
| only screen and (max-width: 760px), | |
| (min-device-width: 768px) and (max-device-width: 1024px) { | |
| /* Force table to not be like tables anymore */ | |
| table, thead, tbody, th, td, tr { | |
| display: block; | |
| } | |
| /* Hide table headers (but not display: none;, for accessibility) */ | |
| thead tr { | |
| position: absolute; | |
| top: -9999px; | |
| left: -9999px; | |
| } | |
| tr { border: 1px solid #ccc; } | |
| td { | |
| /* Behave like a "row" */ | |
| border: none; | |
| border-bottom: 1px solid #eee; | |
| position: relative; | |
| padding-left: 50%; | |
| } | |
| td:before { | |
| /* Now like a table header */ | |
| position: absolute; | |
| /* Top/left values mimic padding */ | |
| top: 6px; | |
| left: 6px; | |
| width: 45%; | |
| padding-right: 10px; | |
| white-space: nowrap; | |
| } | |
| /* | |
| Label the data | |
| */ | |
| td:before { content: attr(data-label); } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment