可调整列宽的jquery table表格插件

发布日期:2014-06-23 16:03:03

有时希望table的列宽是可以通过鼠标拖拉调整宽度的,今天封装了个jquery插件可以方便实现该功能,以下为demo,也可以通过点击下载示例下载


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <table id="tb" width="90%" border="1" cellpadding="0" cellspacing="0">
<tr>
<th>姓名</th>
            <th>年龄</th>
            <th>电话</th>
            <th>地址</th>
</tr>    
    <tr>
            <td>小张</td>
            <td>28</td>
            <td><input type="text" value="132********" /></td>
            <td>普陀区</td>
        </tr>     
        <tr>
            <td>john</td>
            <td>24</td>
            <td>131********</td>
            <td>普陀区xxx</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>27</td>
            <td>无</td>
            <td>虹口区</td>
        </tr>         
</table>


    <br /><br />


    <table id="tb1" width="90%" border="1" cellpadding="0" cellspacing="0">
<tr>
<th>姓名</th>
            <th>年龄</th>
            <th>电话</th>
            <th>地址</th>
</tr>       
    <tr>
            <td>小张</td>
            <td>28</td>
            <td><input type="text" value="132********" /></td>
            <td>普陀区</td>
        </tr>      
        <tr>
            <td>john</td>
            <td>24</td>
            <td>131********</td>
            <td>普陀区xxx</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>27</td>
            <td>无</td>
            <td>虹口区</td>
        </tr>       
</table>


</body>
</html>
<script src="jquery-1.6.2.js"></script>
<script src="ztable-min.js"></script>
<script>
    $("#tb").ZTable();
    $("#tb1").ZTable({
        tableLayout: 'automatic',   //css table-layout='automatic'
        colMinWidth: 50    //最小列宽50px
    });
</script>