可调整列宽的jquery table表格插件
有时希望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>