Responsive table

responsive-table.scss

/* Responsive table */
@media all and (max-width: 640px) {
  .table,
  .row,
  .column,
  .column:before {
    display: inline-block;
    /* Converts a table, table row, table column and table column:before into a block element */
  }

  .table,
  .row .column:last-child {
    border-bottom: none;
  }

  .table-head {
    position: absolute;
    /* Hides table head but not using display none */
    top: -1000em;
    left: -1000em;
  }

  .row {
    border: 1px solid #eeeeee;
    border-top: 2px solid #dddddd;
    border-bottom: 2px solid #dddddd;
    margin: 20px 0;
  }

  .row .column:nth-child(1) {
    /* first column of the row */
    border-left: none;
  }

  .row .column:last-child {
    /* last column of the row */
    border-right: none;
  }

  .row:last-child .column,
  .column {
    /* Column in the last row and column */
    border-bottom: 1px solid #eeeeee;
    width: 100%;
  }

  .column:before {
    /* prints the value of data-label attribute before the column data */
    font-weight: bold;
    padding-right: 20px;
    content: " " attr(data-label) ": ";
    /* call the attribute value of data-label and adds a string // */
  }
}

script.js

// RESPOSIVE TABLES
  // counts total number of td in a head so that we can can use it for label extraction
  var count =0;
  $('body table').each(function() {
  
  count++;
  console.log('table: '+count);
    var head_col_count =  $(this).find('thead th').size();
    console.log('head_col_count: '+head_col_count);

    for ( i=0; i <= head_col_count; i++ )  {
      // head column label extraction
      var head_col_label = $(this).find('thead th:nth-child('+ i +')').text();
      console.log('head_col_label: '+head_col_label);

    
      $(this).find('tbody tr th:nth-child('+ i +')').replaceWith(
        function(){
          return $('<div class="column" data-label="'+ head_col_label +'">').append($(this).contents());
        }
      );

      $(this).find('tbody tr td:nth-child('+ i +')').replaceWith(
        function(){
          return $('<div class="column" data-label="'+ head_col_label +'">').append($(this).contents());
        }
      );
    }

    // replaces table with <div class="table">
    $(this).replaceWith(
      function(){
        return $('<div class="table'+count+'">').append($(this).contents());
      }
    );

    //replaces tr with <div class="row">
    $('.table'+count).find('thead tr').replaceWith(
      function(){
        return $('<div class="column">').append($(this).contents());
      }
    );

    //replaces tr with <div class="row">
    $('.table'+count).find('thead th').replaceWith(
      function(){
        return $('<div class="column">').append($(this).contents());
      }
    );

    // replaces thead with <div class="table-head">
    $('.table'+count).find('thead').replaceWith(
      function(){
        return $('<div class="table-head">').append($(this).contents());
      }
    );  

    //replaces tr with <div class="row">
    $('.table'+count).find('tbody tr').replaceWith(
      function(){
        return $('<div class="row">').append($(this).contents());
      }
    );

    // replaces th with <div class="column">
    $('.table'+count).find('tbody th').replaceWith(
      function(){
        return $('<div class="column">').append($(this).contents());
      }
    );

    // replaces th with <div class="column">
    $('.table'+count).find('tbody td').replaceWith(
      function(){
        return $('<div class="column">').append($(this).contents());
      }
    );

    // replaces tbody with <div class="table-head">
    $('.table'+count).find('tbody').replaceWith(
      function(){
        return $('<div class="table-body">').append($(this).contents());
      }
    ); 
  });