表格宽度的自由拖动

html中表格table中，每列宽度自动拖动的实现方法
1、引入两个js文件：jquery.js和colResizable-1.3.min.js，具体见附件

<script  src="jquery.js"></script>
<script  src="colResizable-1.3.min.js"></script>

2、编写如下一段js代码,其中sample2为表格ID

<script type="text/javascript">
$(
	function()
	{	
		var onSampleResized = function(e)
		{
			var columns = $(e.currentTarget).find("th");
		};	
	
		$("#sample2").colResizable({
			liveDrag:true, 
			gripInnerHtml:"<div class='grip'></div>", 
			draggingClass:"dragging", 
			onResize:onSampleResized});
		
	}
);	
</script>

3、编写表格,注意其ID值sample2和js中保持一致

 <table id="sample2" width="100%" border="1" cellpadding="0" cellspacing="0">
	<tr>
		<th>header</th><th>header</th><th>header</th>
	</tr>
	<tr>
		<td class="left">cell</td><td>cell</td><td class="right">cell</td>
	</tr>
	<tr>
		<td class="left">cell</td><td>cell</td><td class="right">cell</td>
	</tr>
	<tr>
		<td class="left bottom">cell</td><td class="bottom">cell</td><td class="bottom right">cell</td>
	</tr>			
</table>

评论

1 楼 ydcun 2013-07-30  

可以让表格的总宽度也发生变化吗？