Created
November 25, 2014 10:16
-
-
Save julianxhokaxhiu/b630bba30afc706f8347 to your computer and use it in GitHub Desktop.
Responsive Tables / Swap TH to the left on mobile
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
<!-- | |
Based on http://elvery.net/demo/responsive-tables/#no-more-tables | |
--> | |
<table> | |
<thead> | |
<tr> | |
<th>Code</th> | |
<th>Company</th> | |
<th class="numeric">Price</th> | |
<th class="numeric">Change</th> | |
<th class="numeric">Change %</th> | |
<th class="numeric">Open</th> | |
<th class="numeric">High</th> | |
<th class="numeric">Low</th> | |
<th class="numeric">Volume</th> | |
</tr> | |
</thead> | |
<tbody> | |
<tr> | |
<td data-title="Code">AAC</td> | |
<td data-title="Company">AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td> | |
<td data-title="Price" class="numeric">$1.38</td> | |
<td data-title="Change" class="numeric">-0.01</td> | |
<td data-title="Change %" class="numeric">-0.36%</td> | |
<td data-title="Open" class="numeric">$1.39</td> | |
<td data-title="High" class="numeric">$1.39</td> | |
<td data-title="Low" class="numeric">$1.38</td> | |
<td data-title="Volume" class="numeric">9,395</td> | |
</tr> | |
</tbody> | |
</table> |
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
@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: 6px; | |
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); } | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment