Tablesorter demo

All options included, as well as the uitheme widget

by Pasit R

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>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>Header B</th>
                <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>
                <td>column 9B</td>
                <td>column 10B</td>
                <td>column 11B</td>
                <td>column...

CSS

table {
    table-layout: fixed;
    width: 100%;
    *margin-left: -100px; /*ie7*/
}
td, th {
    vertical-align: top;
    border-top: #ccc 1px solid;
    padding: 10px;
    width: 100px;
}
th {
    position: absolute;
    *position: relative; /*ie7*/
    left: 0;
    width: 100px;
}
.outer {
    position: relative;
}
.inner {
    overflow-x: scroll;
    overflow-y: visible;
    width: 400px;
    margin-left: 100px;
}