Responsive Table

layout.scss

$phone-portrait: 320px;

@media screen and (max-width: $phone-portrait) {
  table, thead, tbody, th, td, tr {
    display: block;
    width: 100%;
  }

  // Hide table headers
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  td {
    border: none;
    float: left;
    position: relative;
    width: 100%;
  }
}