no-tables.scss

// https://css-tricks.com/responsive-data-tables/
// https://css-tricks.com/examples/ResponsiveTables/responsive.php
// http://elvery.net/demo/responsive-tables/
.no-more-tables-container {
  @mixin no-more-tables-mixin {
    // Force table to not be like tables anymore
    table, thead, tbody, th, td, tr {
      display: block;
    }

    // Hide table headers (but not display: none;, for accessibility)
    thead tr {
      position: absolute;
      top: -9999px;
      left: -9999px;
    }

    tr {
      border: 1px solid #ccc;
      margin-bottom: 10px;
    }

    td {
      // Behave  like a "row"
      border: none;
      border-bottom: 1px solid #eee;
      position: relative;
      padding-left: 50%;
    }

    td:before {
      // Now like a table header
      position: absolute;
      // Top/left values mimic padding
      top: 6px;
      left: 6px;
      width: 45%;
      padding-right: 10px;
      white-space: nowrap;
      font-weight: bold;
    }

    // Label the data
    td:before {
      content: attr(data-label);
    }
  }

  @media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
    // Use on most tables
    .no-more-tables {
      @include no-more-tables-mixin;
    }
  }

  @media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : portrait)  {
    // Use on tables with very few columns
    .no-more-tables-portrait-only {
      @include no-more-tables-mixin;
    }
  }
}

html: https://gist.github.com/house9/126d95196c3087495002