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>AlphaNumeric</th>
      <th>Numeric</th>
      <th>Animals</th>
      <th class="wide">Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>abc 123</td>
      <td>10</td>
      <td>Koala</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at malesuada augue. Praesent non massa consectetur, pulvinar augue et, semper nibh. Pellentesque diam arcu, mattis nec arcu nec, placerat egestas nulla. Mauris ultricies lacus a vestibulum
        malesuada. Nulla fringilla metus metus, nec faucibus sem dictum id. Curabitur vitae fringilla ligula. Maecenas posuere ut lacus pretium aliquam. Donec odio libero, sagittis eget vehicula vel, volutpat in velit. Phasellus porta mi quis odio dapibus
        lobortis. Nam id...

CSS

table {
  table-layout: fixed;
}

tr td:nth-child(4) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

tr td.show {
  overflow: visible;
  white-space: normal;
}

.wide {
  width: 50%;
}

JavaScript

/* Documentation for this tablesorter FORK can be found at
 * http://mottie.github.io/tablesorter/docs/
 */
$(function() {
  $('table').tablesorter({
    theme: 'blue',
    widthFixed: true,
    widgets: ['zebra', 'columns']
  });
  $('tr td:nth-child(4)').click(function() {
    $(this).toggleClass('show');
  });
});