responsive tables pure CSS... well SASS

responsive-table.scss

/* tables responsive for smartphones */

@media only screen and (max-width: $screen-xs-max) {

  //Force table to not be like tables anymore
  table.table-responsive,
  table.table-responsive-labels {
    display: block;
    thead, tbody, th, td {
      display: block;
      border: none !important;
      vertical-align: top !important;
    }

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

    //Tr become blocks
    tr {
      display: block;
      border-top: 0 !important;
      border-left: 0 !important;
      border-right: 0 !important;
      border-bottom: $grid-gutter-width/2 solid #fff !important;
      padding: $grid-gutter-width/2 !important;
    }

    //td become lines
    td {
      display: inline;
      padding: 0 !important;
    }

  }

  //tables with labels passed as data-label attribute in html code
  table.table-responsive-labels {
    td {
      //Behave like a "row"
      display: block;
      position: relative;
      padding-left: 50% !important;
    }

    td:before {
      // add data-label as label
      content: attr(data-label);
      position: absolute;
      top: 0;
      left: 0;
      width: 45%;
      white-space: nowrap;
      overflow-x: hidden;
    }
  }
}