Tablesorter demo
All options included, as well as the uitheme widget
HTML
<script src="http://mottie.github.com/tablesorter/js/jquery.tablesorter.js"></script>
<script src="http://mottie.github.com/tablesorter/js/jquery.tablesorter.widgets.js"></script>
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.blue.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.dark.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.default.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.dropbox.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.green.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.grey.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.ice.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.black-ice.css">
<div class="outer">
<div class="inner">
<table>
<tr>
<th>Header A</th>
<td class="fake">Header A</td>
<td>column 1A (with more content)</td>
<td>column 2A</td>
<td>column 3A</td>
<td>column 4A</td>
<td>column 5A</td>
<td>column 6A</td>
<td>column 7A</td>
<td>column 8A</td>
<td>column 9A</td>
<td>column 10A</td>
<td>column 11A</td>
<td>column 12A</td>
<td>column 13A</td>
<td>column 14A</td>
</tr>
<tr>
<th>Hea;lklj l;kj k;'kl;' kder B</th>
<td class="fake">Hea;lklj l;kj k;'kl;' kder B</td>
<td>column 1B</td>
<td>column 2B</td>
<td>column 3B</td>
<td>column 4B</td>
<td>column 5B</td>
<td>column 6B</td>
<td>column 7B</td>
<td>column 8B</td>
...
CSS
table {
table-layout: fixed;
width: 100%;
}
td, th {
vertical-align: top;
border-top: #ccc 1px solid;
padding: 10px;
width: 100px;
}
th {
position: absolute;
left: 0;
width: 100px;
}
.outer {
position: relative;
}
.inner {
overflow-x: scroll;
overflow-y: visible;
width: calc(100% - 100px);
margin-left: 100px;
}
.fake, td
{
/*margin-left: -100px; */
position:relative;
left: -120px;/*includes padding=10px * 2
}