Responsive table

index.html

<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>

responsive-table.markdown

Responsive table

Pure CSS display of a table as tabs when viewport's width is too small

A Pen by Jérôme Beau on CodePen.

License.

style.scss

$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;
}