Last active
November 26, 2015 21:22
-
-
Save shammelburg/925064ef96efcb0e28dd to your computer and use it in GitHub Desktop.
CSS Table Pivot
This file contains 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
/* Add data-title to the <td> element like this <td data-title="column header here"></td> */ | |
media only screen and (max-width: 900px) { | |
/* 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; | |
vertical-align: middle !important; | |
} | |
/* Hide table headers (but not display: none;, for accessibility) */ | |
#no-more-tables thead tr { | |
position: absolute; | |
top: -9999px; | |
left: -9999px; | |
vertical-align: middle !important; | |
} | |
#no-more-tables tr { | |
border: 1px solid #ccc; | |
vertical-align: middle !important; | |
} | |
#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; | |
vertical-align: middle !important; | |
} | |
#no-more-tables 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; | |
text-align: left; | |
font-weight: bold; | |
vertical-align: middle !important; | |
} | |
/* Label the data */ | |
#no-more-tables td:before { | |
content: attr(data-title); | |
vertical-align: middle !important; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment