Table Stacking Demo

This page demonstrates how a standard table can be manipulated with CSS to stack into a single column on small screens.

Basic Table

This is a CSS-based approach to manipulating a basic table to stack into a two column format for small screens. This technique requires a fairly simple table structure, but avoids using complicated javascript libraries, or duplicate markup. Both views are readable and logically ordered for a screen reader.

Basic table that stacks on small screens
First Name	Last Name	State	GPA
First Name Papa	Last Name John	State AZ	GPA 4.13
First Name Dom	Last Name Ino	State CA	GPA 3.83
First Name Pizza	Last Name Hut	State NJ	GPA 3.93
First Name Papa	Last Name John	State AZ	GPA 4.13
First Name Dom	Last Name Ino	State CA	GPA 3.83
First Name Pizza	Last Name Hut	State NJ	GPA 3.93

Table markup

Note the extra heading labels within each cell for use at mobile widths.

  <table class="table table--stack">
  <caption>Basic table that stacks on small screens</caption>
    <thead>
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>State</th>
        <th>GPA</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <span class="t-label">First Name</span> Papa
        </td>
        <td>
          <span class="t-label">Last Name</span> John
        </td>
        <td>
          <span class="t-label">State</span> AZ
        </td>
        <td>
          <span class="t-label">GPA</span> 4.13
        </td>
      </tr>
    </tbody>
  </table>

Base SCSS

Here is the basic technique without special styling.

  // stacked view on mobile
  .table--stack {
      display: block;
      thead {
          display: none;
      }
      tbody, tfoot, tr, th, td {
          display: block;
      }
      th, thead th {
      }
      td {
          text-align: right;
      }
      .t-label {
          float: left;
      }
      @media only screen and (min-width: 768px) {
          // reset to table style display
          display: table;
          thead {
              display: table-header-group;
          }
          tbody {
              display: table-row-group;
          }
          tfoot {
              display: table-footer-group;
          }
          tr {
              display: table-row;
          }
          th, td {
              display: table-cell;
              text-align: center;
          }
          td {
              vertical-align: middle;
          }
          .t-label {
              display: none;
          }
      }
  }