Pure CSS display of a table as tabs when viewport's width is too small
A Pen by Jérôme Beau on CodePen.
Created
September 3, 2018 09:57
-
-
Save Javarome/9d1c7a4b42d8dc7c7c5f287ddf10bae5 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
| <p>Change the viewport's width to alternate between tabs and table display:</p> | |
| <input id="col1" type="radio" name="column" checked> | |
| <input id="col2" type="radio" name="column"> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th></th> | |
| <th><label for="col1" tabindex="1">Free</label></th> | |
| <th><label for="col2" tabindex="2">Premium version</label></th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <th>Share</th> | |
| <td id="cell11"><span class="text-short">Share photos</span><span class="text-long">Photos</span></td> | |
| <td id="cell12"><span class="text-short">Share photos & videos</span><span class="text-long">Photos</span></td> | |
| </tr> | |
| <tr> | |
| <th>Storage</th> | |
| <td id="cell21"><span class="text-short">5 GB storage</span><span class="text-long">5 GBytes</span></td> | |
| <td id="cell22"><span class="text-short">50 GB Storage</span><span class="text-long">50 GBytes</span></td> | |
| </tr> | |
| <tr id="row3"> | |
| <th>Support</th> | |
| <td id="cell31"><span class="text-long">No</span></td> | |
| <td id="cell32"><span class="text-short">Dedicated support</span><span class="text-long">Dedicated</span></td> | |
| </tr> | |
| </tbody> | |
| </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
| $padding: 0.4em; | |
| $lineHeight: 1.5em + $padding; | |
| table { | |
| position: relative; | |
| display: inline-block; | |
| border: 1px solid gray; | |
| } | |
| tr { | |
| position: relative; | |
| height: $lineHeight; | |
| } | |
| td, thead, tbody, tr { | |
| width: 100%; | |
| } | |
| thead th { | |
| border-bottom: 1px solid gray; | |
| } | |
| tbody tr th { | |
| display: none; // Hide the heading column | |
| } | |
| td { | |
| position: absolute; | |
| left: 0; | |
| display: block; | |
| padding: $padding; | |
| background: white; | |
| overflow-x: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| label { | |
| cursor: pointer; | |
| } | |
| #row3 { | |
| display: none; | |
| } | |
| #col2:checked ~ table { | |
| label[for="col1"] { | |
| font-weight: normal; | |
| } | |
| #row3 { | |
| display: table-row; | |
| } | |
| } | |
| #col1:checked ~ table { | |
| label[for="col2"] { | |
| font-weight: normal; | |
| } | |
| td + td { | |
| display: none; | |
| } | |
| } | |
| .text-long { | |
| display: none; | |
| } | |
| @media (min-width: 450px) { | |
| #row3 { | |
| display: table-row; | |
| } | |
| .text-short { | |
| display: none; | |
| } | |
| .text-long { | |
| display: inline; | |
| } | |
| #col1:checked ~ table { | |
| label[for="col2"] { | |
| font-weight: bold; | |
| } | |
| } | |
| #col2:checked ~ table { | |
| label[for="col1"] { | |
| font-weight: bold; | |
| } | |
| } | |
| #col1:checked ~ table { | |
| td + td { | |
| display: table-cell; | |
| } | |
| } | |
| table { | |
| display: table; | |
| border: 1px solid gray; | |
| } | |
| td, | |
| thead, | |
| tbody, | |
| tr { | |
| width: auto; | |
| } | |
| tr { | |
| display: table-row; | |
| } | |
| thead th { | |
| border-bottom: none; | |
| } | |
| tbody tr th { | |
| display: table-cell; | |
| } | |
| td { | |
| position: relative; | |
| display: table-cell; | |
| border: 1px solid gray; | |
| } | |
| label { | |
| cursor: default; | |
| } | |
| } | |
| #col1, #col2 { // Hide the inputs, just show the labels | |
| display: initial; | |
| position: absolute; | |
| left: -1000px; | |
| top: -1000px; | |
| right: initial; | |
| bottom: initial; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment