Ширина столбца Tablesorter

У меня есть ответвление tablesorter на github, которое включает несколько дополнительных виджетов. Одним из них является виджет столбца с изменяемым размером — демонстрация здесь. Я разместил здесь только код виджета с изменяемым размером, но я думаю, вам может понравиться дополнительный сценарий хранения, который сохраняет ширину столбца в локальном хранилище/куки, которые включены в файл виджета.

Получите файл виджета здесь: http://mottie.github.com/tablesorter/js/jquery.tablesorter.widgets.js

// Add Column resizing widget
// this widget saves the column widths if
// $.tablesorter.storage function is included
// **************************
$.tablesorter.addWidget({
    id: "resizable",
    format: function(table) {
        if ($(table).hasClass('hasResizable')) { return; }
        $(table).addClass('hasResizable');
        var i, j, w, s, c = table.config,
            $cols = $(c.headerList).filter(':gt(0)'),
            position = 0,
            $target = null,
            $prev = null,
            len = $cols.length,
            stopResize = function(){
                position = 0;
                $target = $prev = null;
                $(window).trigger('resize'); // will update stickyHeaders, just in case
            };
        s = ($.tablesorter.storage) ? $.tablesorter.storage(table, 'tablesorter-resizable') : '';
        // process only if table ID or url match
        if (s) {
            for (j in s) {
                if (!isNaN(j) && j < c.headerList.length) {
                    $(c.headerList[j]).width(s[j]); // set saved resizable widths
                }
            }
        }
        $cols
            .each(function(){
                $(this)
                    .append('<div class="tablesorter-resizer" style="cursor:w-resize;position:absolute;height:100%;width:20px;left:-20px;top:0;z-index:1;"></div>')
                    .wrapInner('<div style="position:relative;height:100%;width:100%"></div>');
            })
            .bind('mousemove', function(e){
                // ignore mousemove if no mousedown
                if (position === 0 || !$target) { return; }
                var w = e.pageX - position,
                    n = $prev;
                // make sure
                if ( $target.width() < -w || ( $prev && $prev.width() <= w )) { return; }
                // resize current column
                $prev.width( $prev.width() + w );
                position = e.pageX;
            })
            .bind('mouseup', function(){
                if (s && $.tablesorter.storage && $target) {
                    s[$prev.index()] = $prev.width();
                    $.tablesorter.storage(table, 'tablesorter-resizable', s);
                }
                stopResize();
                return false;
            })
            .find('.tablesorter-resizer')
            .bind('mousedown', function(e){
                // save header cell and mouse position
                $target = $(e.target).closest('th');
                $prev = $target.prev();
                position = e.pageX;
            });
        $(table).find('thead').bind('mouseup mouseleave', function(){
            stopResize();
        });
    }
});

После некоторых дополнительных исследований я обнаружил, что это общая проблема с IE css. Исправление состоит в том, чтобы вручную установить «настройку ширины td», что затем дает желаемую ширину столбца. Надеюсь это поможет.