Responsive Tables

Display or hide columns if not enough space and add it to the rows.

HTML

<!-- Table -->
<table class="footable table table-condensed table-hover table-striped table-bordered">

  <!-- Table heading -->
  <thead>
    <tr>
      <th data-class="expand">Rendering eng.</th>
      <th data-hide="phone,tablet">Browser</th>
      <th data-hide="phone,tablet">Platform(s)</th>
      <th data-hide="phone">Eng. vers.</th>
      <th>CSS grade</th>
    </tr>
  </thead>
  <!--- // Table heading END -->

  <!-- Table body -->
  <tbody>

    <!-- Table row -->
    <tr class="gradeX">
      <td>Trident</td>
      <td>Internet Explorer 4.0</td>
      <td>Win 95+</td>
      <td class="center">4</td>
      <td class="center">X</td>
    </tr>
    <!-- // Table row END -->

    <!-- Table row -->
    <tr class="gradeC">
      <td>Trident</td>
      <td>Internet Explorer 5.0</td>
      <td>Win 95+</td>
      <td class="center">5</td>
      <td class="center">C</td>
    </tr>
    <!-- // Table row END -->

    <!-- Table row -->
    <tr class="gradeA">
      <td>Trident</td>
      <td>Internet Explorer 5.5</td>
      <td>Win 95+</td>
      <td class="center">5.5</td>
      <td class="center">A</td>
    </tr>
    <!-- // Table row END -->

    <!-- Table row -->
    <tr class="gradeA">
      <td>Trident</td>
      <td>Internet Explorer 6</td>
      <td>Win 98+</td>
      <td class="center">6</td>
      <td class="center">A</td>
    </tr>
    <!-- // Table row END -->

    <!-- Table row -->
    <tr class="gradeA">
      <td>Trident</td>
      <td>Internet Explorer 7</td>
      <td>Win XP SP2+</td>
      <td class="center">7</td>
      <td class="center">A</td>
    </tr>
    <!-- // Table row END -->

    <!-- Table row -->
    <tr class="gradeA">
      <td>Trident</td>
      <td>AOL browser (AOL desktop)</td>
      <td>Win XP</td>
      <td class="center">6</td>
      <td class="center">A</td>
    </tr>
    <!-- // Table row END -->

    <!-- Table row -->
    <tr class="gradeA">
      <td>Gecko</td>
      <td>Firefox 1.0</td>
      <td>Win 98+ / OSX.2+</td>
...

CSS

body {
  margin: 20px;
}

.footable-toggle:before {
  content: "\2b";
  font-family: 'Glyphicons Halflings';
  padding-right: 5px;
}

JavaScript

/*!
 * FooTable - Awesome Responsive Tables
 * Version : 2.0.1
 * http://fooplugins.com/plugins/footable-jquery/
 *
 * Requires jQuery - http://jquery.com/
 *
 * Copyright 2013 Steven Usher & Brad Vincent
 * Released under the MIT license
 * You are free to use FooTable in commercial projects as long as this copyright header is left intact.
 *
 * Date: 31 Aug 2013
 */
(function(e, t) {
  function a() {
    var e = this;
    e.id = null, e.busy = !1, e.start = function(t, a) {
      e.busy || (e.stop(), e.id = setTimeout(function() {
        t(), e.id = null, e.busy = !1
      }, a), e.busy = !0)
    }, e.stop = function() {
      null !== e.id && (clearTimeout(e.id), e.id = null, e.busy = !1)
    }
  }

  function o(o, i, n) {
    var r = this;
    r.id = n, r.table = o, r.options = i, r.breakpoints = [], r.breakpointNames = "", r.columns = {}, r.plugins = t.footable.plugins.load(r);
    var l = r.options,
      d = l.classes,
      s = l.events,
      u = l.triggers,
      f = 0;
    return r.timers = {
      resize: new a,
      register: function(e) {
        return r.timers[e] = new a, r.timers[e]
      }
    }, r.init = function() {
      var a = e(t),
        o = e(r.table);
      if (t.footable.plugins.init(r), o.hasClass(d.loaded)) return r.raise(s.alreadyInitialized), undefined;
      r.raise(s.initializing), o.addClass(d.loading), o.find(l.columnDataSelector).each(function() {
        var e = r.getColumnData(this);
        r.columns[e.index] = e
      });
      for (var i in l.breakpoints) r.breakpoints.push({
        name: i,
        width: l.breakpoints[i]
      }), r.breakpointNames += i + " ";
      r.breakpoints.sort(function(e, t) {
        return e.width - t.width
      }), o.bind(u.initialize, function() {
        o.removeData("footable_info"), o.data("breakpoint", ""), o.trigger(u.resize), o.removeClass(d.loading), o.addClass(d.loaded).addClass(d.main), r.raise(s.initialized)
      }).bind(u.redraw, function() {
        r.redraw()
     ...