调整Table表格宽度插件colResizable

调整Table表格宽度插件colResizable

引入JS

<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="js/colResizable-1.6.js" type="text/javascript"></script>
 
 
1
2

TABLE

<table class="table table-bordered">
<thead>
    <tr>
       <th>栏目类型</th>
       <th>活动名称</th>
       <th>状态</th>
       <th>操作选项</th>
    </tr>
</thead>
<tbody>
    <tr>
       <td>青春日记</td>
       <td>我们一起傻逼的日子</td>
       <td>提交</td>
       <td>审核</td>
    </tr>
    <tr>
       <td>我和孩子的成长故事</td>
       <td>成长故事</td>
       <td>通过</td>
       <td>审核</td>
    </tr>
</tbody>
</table>
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

JS

<script type="text/javascript">
    $(function() {
        $("table").colResizable();
    })
</script>
 
 
1
2
3
4
5

以上步骤即可实现最简单的鼠标拖动调整表格列宽

在线演示：colresizable

 colResizable 官方文档：http://www.bacubacu.com/colresizable/

原文地址： http://blog.csdn.net/itmyhome1990/article/details/51322740