Last active
August 29, 2015 14:26
-
-
Save ankitraturi/f80312da391ae25e2935 to your computer and use it in GitHub Desktop.
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
| /* | |
| This CSS is used for responsive tables. | |
| id of the table parent should be 'no-more-tables'. | |
| table should have class 'table' | |
| */ | |
| table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| } | |
| /* Zebra striping */ | |
| tr:nth-of-type(odd) { | |
| background: #eee; | |
| } | |
| td, th { | |
| padding: 6px; | |
| border: 1px solid #ccc; | |
| text-align: left; | |
| } | |
| @media only screen and (max-width: 800px) { | |
| /* Force table to not be like tables anymore */ | |
| #no-more-tables table, | |
| #no-more-tables thead, | |
| #no-more-tables tbody, | |
| #no-more-tables th, | |
| #no-more-tables td, | |
| #no-more-tables tr { | |
| display: block; | |
| } | |
| /* Hide table headers (but not display: none;, for accessibility) */ | |
| #no-more-tables thead tr { | |
| position: absolute; | |
| top: -9999px; | |
| left: -9999px; | |
| } | |
| #no-more-tables tr { | |
| border: 1px solid #ccc; | |
| } | |
| #no-more-tables td { | |
| /* Behave like a "row" */ | |
| border: none; | |
| border-bottom: 1px solid #eee; | |
| position: relative; | |
| padding-left: 50%; | |
| white-space: normal; | |
| text-align: left; | |
| } | |
| #no-more-tables td:before { | |
| /* Now like a table header */ | |
| position: absolute; | |
| /* Top/left values mimic padding */ | |
| top: 1px; | |
| bottom: 2px; | |
| left: 6px; | |
| width: 45%; | |
| padding-right: 10px; | |
| white-space: nowrap; | |
| text-align: left; | |
| font-weight: bold; | |
| } | |
| /* | |
| Label the data | |
| */ | |
| #no-more-tables td:before { | |
| content: attr(data-title); | |
| } | |
| } | |
| .table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th { | |
| background-color: #fff; | |
| } | |
| .table-striped > tbody > tr:nth-child(2n) > td, .table-striped > tbody > tr:nth-child(2n) > th { | |
| background-color: #eee9e7; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment