Tablesorter列宽

Question

我想知道是否有人可以帮助我。

我使用Tablesorter jQuery汇总了this页面。该页面工作正常，但我正在尝试找到一种更改列宽的方法。

我已经阅读了文档和一些教程，但到目前为止，我一直不允许用户更改此设置。

我只是想知道是否有人可以看看这个，让我知道我哪里出错了。

非常感谢和问候

Answer 1

经过一些研究后，我发现这是IE css的常见问题。修复是手动设置'td width setting'，然后给出所需的列宽。希望这可以帮助。

Answer 2

我有一个tablesorter on github的分支，其中包含一些额外的小部件。其中一个是可调整大小的列小部件 - demo here。我在这里发布了可调整大小的小部件代码，但我认为您可能希望额外的存储脚本将列宽保存到小部件文件中包含的本地存储/ cookie。

在此处获取小部件文件：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();
        });
    }
});