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.default.css">
<script src="https://rawgit.com/Mottie/tablesorter/master/js/jquery.tablesorter.js"></script>
<table class="tablesorter">
  <thead>
    <tr>
      <th id="header1">Name</th>
      <th id="header2">Phone</th>
      <th id="header3">Type</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Steven</td>
      <td colspan=2>
        <div style="display: table;width: 100%;">
                  <div style="display: table-row;">
                  <div style="display: table-cell;" class="cell1">123456789</div>
                  <div style="display: table-cell;" class="cell2">area</div>
        </div>
        <div style="display: table-row;">
                  <div style="display: table-cell;" class="cell1">531354312</div>
                  <div style="display: table-cell;" class="cell2">bar</div>
        </div>
        </div>

      </td>
      </tr>
<tr>
      <td>Andrea</td>
      <td colspan=2>
        <div style="display: table;width: 100%;">
                  <div style="display: table-row;">
                  <div style="display: table-cell;" class="cell1">945175411</div>
                  <div style="display: table-cell;" class="cell2">home</div>
        </div>
        <div style="display: table-row;">
                  <div style="display: table-cell;" class="cell1">42161535154</div>
                  <div style="display: table-cell;" class="cell2">club</div>
        </div>
        </div>

      </td>
      </tr>
<tr>
      <td>Jules</td>
      <td colspan=2>
        <div style="display: table;width: 100%;">
                  <div style="display: table-row;">
                  <div style="display: table-cell;" class="cell1">4585427</div>
                  <div style="display: table-cell;" class="cell2">home</div>
        </div>
        <div style="display: table-row;">
                  <div style="display: table-cell;" class="cell1">784210542</div>
                  <div...

CSS

.tablesorter{
  width: 100%;
  
}

th{
  text-align: left;
}

JavaScript

// http://stackoverflow.com/q/36449711/145346
$('table').tablesorter({
  debug: true,
  duplicateSpan: false,
	textExtraction: function(node, table, cellIndex) {
    if (cellIndex > 0) {
      // this works because cell1 and cell2 match the table
      // column zero-based index
    	return $(node).find('.cell' + cellIndex).text(); 
    }
  	return node.textContent;
  }
});

$('.cell1').css('width', $('#header2').css('width')+'px');
$('.cell2').css('width', $('#header3').css('width')+'px');