colResizable的替代品，自定义列宽调整

前段时间一直在找列宽拖动的插件，一开始找到colResizable-1.6.js，非常的方便

1. 引入js包

2. 调用js

详细步骤见官网：http://www.bacubacu.com/colresizable/

但是，这个插件有个缺点，就是单元格内容不能拖到最小，也就是说不能小于内容的宽度，于是，我找到一个帖子

http://blog.csdn.net/skygpan/article/details/52469847

大概意思就是说，他改了源码，屏蔽了三个地方，然后就可以任意该表列宽，不受内容控制

但是问题又来了，在我的框架中，这样设置会将旁边的列变得更小，而且无法还原，只能刷新还原，非常的不方便

于是我想，不就是一个拖动，增加列宽吗，怎么还变动其他的列宽，真搞不懂，写这么多代码干啥，于是，我走上了“寻找”创新的路，功夫不负有心人，真的被我找到了

    

        

            
th 1
            
th 2
        
    
    

        

            
td 1
            
td 2
        
    

$(function() {
    var pressed = false;
    var start = undefined;
    var startX, startWidth;
    
    $("table-title th").mousedown(function(e) {
        start = $(this);
        pressed = true;
        startX = e.pageX;
        startWidth = $(this).width();
        $(start).addClass("resizing");
    });
    
    $(document).mousemove(function(e) {
        if(pressed) {
            $(start).width(startWidth+(e.pageX-startX));
        }
    });
    
    $(document).mouseup(function() {
        if(pressed) {
            $(start).removeClass("resizing");
            pressed = false;
        }
    });
});

table {
    border-width: 1px;
    border-style: solid;
    border-color: black;
    border-collapse: collapse;
}

table td {
    border-width: 1px;
    border-style: solid;
    border-color: black;
}

table th {
    border-width: 1px;
    border-style: solid;
    border-color: black;
    background-color: green;
}

table th.resizing {
    cursor: col-resize;
}

引用原地址：http://jsfiddle.net/ydTCZ/

以上，问题完美解决，也不影响其他列宽、样式等等，宽度也可以缩到最小，分享给大家