jquery.responsiveTable

Duplicate TH elements next to their respective TD elements. Useful for responsive tables that drop their thead

by donabrams

HTML

<table data-respond-width="480">
    <caption>Current access</caption>
    <thead>
      <tr>
        <th>Name/ UD ID</th>
        <th>My Finances</th>
        <th>Schedule</th>
        <th>Grades</th>
        <th>Final exam<br/>schedule <span style="display:none;">Final exam schedule</span></th>
        <th>Honors/ awards</th>
        <th>Housing assignment</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Don Abrams (53611)</td>
        <td>Don Abrams (53611)</td>
        <td>Don Abrams (53611)</td>
        <td>Don Abrams (53611)</td>
        <td>Don Abrams (53611)</td>
        <td>Don Abrams (53611)</td>
        <td>Don Abrams (53611)</td>
      </tr>
      <tr>
        <td>Don Abrams (53611)</td>
        <td>Don Abrams (53611)</td>
        <td>Don Abrams (53611)</td>
        <td>Don Abrams (53611)</td>
        <td>Don Abrams (53611)</td>
        <td>Don Abrams (53611)</td>
        <td>Don Abrams (53611)</td>
      </tr>
    </tbody>
  </table>

CSS

@media screen and (max-width: 480px) {
  table, caption, tbody, th, td, tr {
    display: block;
  }
  thead, tfoot {
    display: none;
  }
}

JavaScript

// You can specify a resondWidth when you call this function
// A data-respond-width attribute will override it.
$.fn.responsiveTable = function(respondWidth) {
  $(this).each(function() {
    var table = $(this);  
    respondWidth = table.data("respond-width") || respondWidth;
    $(window).resize(function() {
      var width = $(window).width();
      var respond = width <= respondWidth;
      var prevState = table.data("respond");
      if (prevState != null && prevState == respond)
        return;
      table.data("respond", respond);
      if (respond) {
        table.addClass("flattened");
        $("thead th", table).each(function(i) {
          var toInsert = $(this).clone(true);
          toInsert.addClass("respond-th");
           $("tbody td:nth-of-type(" + (i+1) + ")", table).before(toInsert);
        });
      }
      else {
        table.removeClass("flattened");
        $(".respond-th", table).remove();
      }
    }).resize();
  });
  return this;
};
$("table").responsiveTable();