Tablesorter demo

All options included, as well as the uitheme widget

by Mottie

HTML

<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.blue.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.dark.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.default.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.dropbox.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.green.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.grey.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.ice.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.black-ice.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.bootstrap.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/addons/pager/jquery.tablesorter.pager.css">
<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>
<script src="https://mottie.github.io/tablesorter/addons/pager/jquery.tablesorter.pager.js"></script>
<table class="tablesorter">
  <thead>
    <tr>
      <th>Name</th>
      <th>English</th>
      <th>Japanese</th>
      <th>Calculus</th>
      <th>Geometry</th>
      <th>History</th>
      <th>Chemistry</th>
      <th>Physical&nbsp;Science</th>
      <th>Study&nbsp;Hall</th>
      <th>Physical&nbsp;Education</th>
      <th>Underwater&nbsp;basketweaving</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Student01</td>
      <td>86</td>
      <td>77</td>
      <td>80</td>
      <td>70</td>
      <td>75</td>
      <td>87</td>
      <td>87</td>
      <td>100</td>
      <td>99</td>
      <td>80</td>
    </tr>
    <tr>
      <td>Student02</td>
      <td>89</td>
      <td>65</td>
      <td>90</td>
      <td>88</td>
      <td>100</td>
      <td>82</td>
      <td>89</td>
      <td>100</td>
     ...

CSS

.tablesorter thead .tablesorter-header {
  height: 200px;
  width: 20px;
  padding: 0;
}

.tablesorter thead th .tablesorter-header-inner {
  transform: rotate(-90deg);
  width: 16px;
  padding: 0 3px;
  margin-top: 140px;
}

JavaScript

/* Documentation for this tablesorter FORK can be found at
 * http://mottie.github.io/tablesorter/docs/
 */
$(function() {
  $('table').tablesorter({
    theme: 'blue'
  });
});