Tablesorter demo

All options included, as well as the uitheme widget

HTML

<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.js"></script>
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.widgets.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://mottie.github.io/tablesorter/js/widgets/widget-reflow.js"></script>
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.bootstrap.css">
<script src="https://mottie.github.io/tablesorter/js/widgets/widget-columnSelector.js"></script>
<!-- This selector markup is completely customizable -->
<div class="columnSelectorWrapper">
  <input id="colSelect1" type="checkbox" class="hidden">
  <label class="columnSelectorButton" for="colSelect1">Column</label>
  <div id="columnSelector" class="columnSelector">
    <!-- this div is where the column selector is added -->
  </div>
</div> (When "Auto" is set, the table becomes responsive; resize the browser window to see it work)

<table id="table2">
  <thead>
    <tr>
      <th data-priority="critical">Name</th>
      <th data-priority="2">Major</th>
      <th data-priority="6" data-name="Gender">Sex</th>
      <th data-priority="4">English</th>
      <th data-priority="5">Japanese</th>
      <th data-priority="3">Calculus</th>
      <th data-priority="2">Geometry</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Major</th>
      <th>Sex</th>
      <th>English</th>
      <th>Japanese</th>
      <th>Calculus</th>
      <th>Geometry</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Student03</td>
      <td>Languages</td>
      <td>female</td>
      <td>85</td>
      <td>95</td>
      <td>80</td>
      <td>85</td>
    </tr>
    <tr>
      <td>Student04</td>
      <td>Languages</td>
      <td>male</td>
      <td>60</td>
      <td>55</td>
      <td>100</td>
      <td>100</td>
    </tr>
   ...

CSS

.tablesorter-bootstrap thead th {
  margin: 0;
}


/* REQUIRED CSS: change your reflow breakpoint here (35em below) */

@media ( max-width: 35em) {
  .ui-table-reflow td,
  .ui-table-reflow th {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: right;
    /* if not using the stickyHeaders widget (not the css3 version)
			 * the "!important" flag, and "height: auto" can be removed */
    width: 100% !important;
    height: auto !important;
  }
  /* reflow widget */
  .ui-table-reflow tbody td[data-title]:before {
    color: #469;
    font-size: .9em;
    content: attr(data-title);
    float: left;
    width: 50%;
    white-space: pre-wrap;
    text-align: bottom;
    display: inline-block;
  }
  /* allow toggle of thead */
  thead.hide-header {
    display: none;
  }
}

.ui-table-reflow .ui-table-cell-label {
  display: none;
}

/*** custom css only popup ***/

.columnSelectorWrapper {
  position: relative;
  margin: 10px 0;
  display: inline-block;
}

.columnSelector,
.hidden {
  display: none;
}

.columnSelectorButton {
  background: #99bfe6;
  border: #888 1px solid;
  color: #111;
  border-radius: 5px;
  padding: 5px;
}

#colSelect1:checked + label {
  background: #5797d7;
  border-color: #555;
}

#colSelect1:checked ~ #columnSelector {
  display: block;
}

.columnSelector {
  width: 120px;
  position: absolute;
  top: 30px;
  padding: 10px;
  background: #fff;
  border: #99bfe6 1px solid;
  border-radius: 5px;
  z-index: 100;
}

.columnSelector label {
  display: block;
}

.columnSelector label:nth-child(1) {
  border-bottom: #99bfe6 solid 1px;
  margin-bottom: 5px;
}

.columnSelector input {
  margin-right: 5px;
}

.columnSelector .disabled {
  color: #ddd;
}

JavaScript

/* Documentation for this tablesorter FORK can be found at
 * http://mottie.github.io/tablesorter/docs/
 */
$(function() {
  // simple reflow widget + columnSelector & stickyHeaders widgets
  $("#table2").tablesorter({
    theme: 'bootstrap',
    headerTemplate: '{content}{icon}',
    widgets: ['zebra', 'uitheme', 'reflow', 'columnSelector'],
    widgetOptions: {
      // target the column selector markup
      columnSelector_container: $('#columnSelector'),
      // data attribute containing column name to use in the selector container
      // make it use the same as reflow_headerAttrib
      columnSelector_name: 'data-name',

      // class name added to make it responsive (class name within media query)
      reflow_className: 'ui-table-reflow',
      // header attribute containing modified header name
      reflow_headerAttrib: 'data-name',
      // data attribute added to each tbody cell
      // it contains the header cell text, visible upon reflow
      reflow_dataAttrib: 'data-title'
    }
  });

});