Responsive Tables

Le principe est d'utiliser un dispaly: table-cell sur smartphone en activant une class before qui fait référence à un content: attr(data-content)

Un pluggin jQuery permet de copier l'entête du tableau dans l'attribut data-content. Il est possible également de le générer directement.

voir un exemple ici => http://codepen.io/geoffyuen/pen/FCBEg

td {
    display: block; 

    &:first-child { padding-top: .5em; }
    &:last-child { padding-bottom: .5em; }

    &:before {
      content: attr(data-th)": "; // who knew you could do this? The internet, that's who.
      font-weight: bold;

      // optional stuff to make it look nicer
      width: 6.5em; // magic number :( adjust according to your own content
      display: inline-block;
      // end options

      @media (min-width: $breakpoint-alpha) { display: none; }
    }
}