Skip to content

Instantly share code, notes, and snippets.

@Javarome

Javarome/index.html

Created September 3, 2018 09:57
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Javarome/9d1c7a4b42d8dc7c7c5f287ddf10bae5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Javarome/9d1c7a4b42d8dc7c7c5f287ddf10bae5 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Javarome created this gist Sep 3, 2018.
    29 changes: 29 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,29 @@
    <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>
    7 changes: 7 additions & 0 deletions responsive-table.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    Responsive table
    ----------------
    Pure CSS display of a table as tabs when viewport's width is too small

    A [Pen](https://codepen.io/Javarome/pen/VBbxRv) by [Jérôme Beau](https://codepen.io/Javarome) on [CodePen](https://codepen.io).

    [License](https://codepen.io/Javarome/pen/VBbxRv/license).
    121 changes: 121 additions & 0 deletions style.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,121 @@
    $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;
    }