jquery表格拖动宽度

1.引入jquery

<script type="text/javascript" src="__STATIC__/colresizable/colResizable-1.6.js"></script>
<script type="text/javascript" src="__STATIC__/jquery/1.9.1/jquery.min.js"></script>

2.js编写

  <!--让表格宽度可拖动 -->
            <style type="text/css">
                td{
                    overflow:hidden;		/* 内容超出宽度时隐藏超出部分的内容 */
                    white-space:nowrap;		/* 不换行 */
                    text-overflow:ellipsis;	/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用*/
                }
            </style>

 <script type="text/javascript">
                $(function(){
                    $("#disabled").colResizable({
                        liveDrag:true,
                        gripInnerHtml:"<div class='grip'></div>",
                        draggingClass:"dragging",
                        resizeMode:'fit'
                    });
                });
        </script>
 <table class="table table-border table-bordered table-hover table-bg table-sort" id="disabled">
            <thead>
            <tr class="text-c">
                <th width="25"><input type="checkbox" name="" value=""></th>
                <th width="20">ID</th>
                <th width="80">名称</th>
                <th width="40">图片</th>
                <th width="40">活动URL</th>
                <th width="80">创建时间</th>
                <th width="80">状态</th>
                <th width="40">操作</th>
            </tr>
            </thead>
            <tbody>
            {volist name="data" id='vo' empty='$empty'}
            <tr class="text-c" data-itemid="{$vo.id}" data-url="{:url('upfield')}">
                <td width="25"><input type="checkbox" name="id" value="{$vo.id}"></td>
                <td width="20">{$vo.id}</td>
                <td width="30">{$vo.title}</td>
                <td width="60">
                    <img src="{$vo.activityimglink|sha1topath}" alt="" height="50">
                </td>
                <td width="80">{$vo.activityimgurl}</td>
                <td width="70">{$vo.create_time}</td>
                <td width="30">
                    {switch name="vo['status']"}
                    {case value="1"}<span class="label label-success radius">上架</span>{/case}
                    {case value="0"}<span class="label label-danger radius">下架</span>{/case}
                    {default /}<span class="label label-secondary radius">上架</span>
                    {/switch}
                </td>
                <td class="td-manage">
                    <a title="编辑" href="{:url('edit',['id'=>$vo['id']])}"  class="ml-5 popshow" w='100%' style="text-decoration:none"><i class="Hui-iconfont">&#xe6df;</i></a>
                    <a title="删除" href="{:url('del',['id'=>$vo['id']])}" class="ml-5 ajax-get confirm" msg="您确定要删除吗?" style="text-decoration:none"><i class="Hui-iconfont">&#xe6e2;</i></a></td>
            </tr>
            {/volist}
            </tbody>
        </table>

jquery链接：https://pan.baidu.com/s/17xHHtuqACSDTfanYzRd9qg 提取码：dukm