table表格可手动调整表格列宽度

有时候会遇到这样的需求,在页面中可以手动调整表格列的宽度。解决这个问题我使用的是colResizable这个控件。colResizable 是一个 jQuery 的插件,主要用于增强 HTML 的表格,新增的功能包括手工调整表格列宽度。该插件很小,只有 2.8k,无需依赖其他插件。

第一步:

<script type="text/javascript" src="${ctxStatic}/common/colResizable-1.6.min.js"></script>

第二步:

<script type="text/javascript">
    $(document).ready(function() {
        $(".table").colResizable({
            liveDrag:true,
            resizeMode:'fit'
        });
    });
</script>

需要注意的是:

<table id="contentTable" class="table table-striped table-bordered table-condensed">

js中使用的选择器要与table中的属性参数相匹配。

猜你喜欢

转载自my.oschina.net/u/561367/blog/898718