colResizable的替代品，自定义列宽调整-CSDN博客

本文链接：https://blog.csdn.net/cm_1234/article/details/78770503

本文介绍了作者在寻找列宽拖动插件过程中，从使用colResizable到发现其限制，再到尝试修改源码的问题。作者分享了一个解决办法，即通过修改源码实现任意调整表格列宽，但此方法会导致相邻列宽度变化且无法轻松还原。最后，作者找到了一个更简洁的解决方案，以避免影响其他列宽。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

1. 引入js包

2. 调用js

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

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

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

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

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

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

<table class="table-title">
    <thead>
        <tr>
            <th>th 1</th>
            <th>th 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>td 1</td>
            <td>td 2</td>
        </tr>
    </tbody>
</table>

$(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/

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