<html> 
<title>table拖动(兼容Firefox 3.5/IE6),固定表格宽度</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<style type="text/css">
.bg { 
font-size:12px; 
color:#000000; 
table-layout:fixed;//这个属性可以隐藏文字 
} 
.bg td{ 
font-size:12px; 
color:#000000; 
text-align:left; 
line-height:15px; 
height:20px; 
} 
.bg td.tit{ 
background-color:#e2e2e2; 
color:#000; 
height:17px; 
text-align:center; 
line-height:15px; 
} 
.bg td.num{ 
background-color:#e2e2e2; 
color:#000; 
text-align:right; 
line-height:15px; 
height:22px; 
width:30px; 
} 
.resizeDivClass{ 
text-align:right; 
width:3px; 
margin:0px 0 0px 0; 
background:#fff; 
border:0px; 
float:right; 
cursor:e-resize; 
} 
</style> 
<script type="text/javascript"><!-- 
window.onload=function(){ 
drag(document.getElementById('drag')); 
drag(document.getElementById('drag2')); 
drag(document.getElementById('drag3')); 
drag(document.getElementById('drag4')); 
}; 
function drag(o,r){ 
o.p_p_c_gw=function(index)/*取得o.parentNode.parentNode.cells的宽度,兼容IE6和Firefox*/{ 
	if(window.ActiveXObject){ 
		return o.parentNode.parentNode.cells[o.parentNode.cellIndex+index].offsetWidth; 
	}else{ 
		return parseInt(o.parentNode.parentNode.cells[o.parentNode.cellIndex+index].offsetWidth)- 
		parseInt(o.parentNode.parentNode.parentNode.parentNode.cellPadding)*2-2; 
	} 
} 

o.p_p_p_sw=function(index,w)/*设置所有行的第index个单元格为w,在IE下可只设第一行*/{ 
	for(var i=0;i<o.parentNode.parentNode.parentNode.parentNode.rows.length;i++) { 
		o.parentNode.parentNode.parentNode.parentNode.rows[i].cells[index].style.width=w; 
	} 
} 

var out=document.getElementById('my'); 

o.firstChild.onmousedown=function(){return false;}; 
o.onmousedown=function(a){ 
	var d=document;if(!a)a=window.event; 
	var lastX=a.clientX; 
	var watch_dog=o.p_p_c_gw(0)+o.p_p_c_gw(1);//有时候拖拽过快表格会变大,至于为什么会这样我也不清楚。watch_dog是为了保证表格不会变大, 
	if(o.setCapture) 
	o.setCapture(); 
	else if(window.captureEvents) 
	window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); 
	// 
	d.onmousemove=function(a){ 
		if(!a)a=window.event; 
		if(o.p_p_c_gw(0)+o.p_p_c_gw(1)>watch_dog){ 
			o.p_p_p_sw(o.parentNode.cellIndex+1,watch_dog-o.p_p_c_gw(0)); 
			return; 
		} 
		var t=a.clientX-lastX;out.innerHTML=t; 
		if(t>0) {//right 
			if(parseInt(o.parentNode.parentNode.cells[o.parentNode.cellIndex+1].style.width)-t<10) 
			return; 
			o.p_p_p_sw(o.parentNode.cellIndex,o.p_p_c_gw(0)+t); 
			o.p_p_p_sw(o.parentNode.cellIndex+1,o.p_p_c_gw(1)-t); 
		} else {//left 
			if(parseInt(o.parentNode.parentNode.cells[o.parentNode.cellIndex].style.width)+t<10) 
			return; 
			o.p_p_p_sw(o.parentNode.cellIndex,o.p_p_c_gw(0)+t); 
			o.p_p_p_sw(o.parentNode.cellIndex+1,o.p_p_c_gw(1)-t); 
		} 
		lastX=a.clientX; 
	}; 
	d.onmouseup=function(){ 
		if(o.releaseCapture) 
		o.releaseCapture(); 
		else if(window.captureEvents) 
		window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); 
		d.onmousemove=null; 
		d.onmouseup=null; 
	}; 
}; 
} 
// --></script> 
<body > 
<table class="bg" width="60%" border="1" cellspacing="0" cellpadding="0" bordercolorlight="#7b7b7b" bordercolordark="#efefef" id="theObjTable" > 
<tr > 
<td class="num" >序号</td> 
<td class="tit" > 
<span class="resizeDivClass" id="drag"><img src="images/box1.gif" src="images/box1.gif" width="3" height="18"></span> 
公司名称 
</td> 
<td class="tit" > 
<span class="resizeDivClass" id="drag2"><img src="images/box1.gif" src="images/box1.gif" width="3" height="18"></span> 
订单客户 
</td> 
<td class="tit" > 
<span class="resizeDivClass" id="drag3"><img src="images/box1.gif" src="images/box1.gif" width="3" height="18"></span> 
部门 
</td> 
<td class="tit" > 
<span class="resizeDivClass" id="drag4"><img src="images/box1.gif" src="images/box1.gif" width="3" height="18"></span> 
业务员 
</td> 
<td class="tit" > 

交款方式 
</td> 
</tr> 
<tr > 
<td class="num" >1</td> 
<td> <div style="white-space:nowrap;overflow:hidden;width:100%;">脚本之家</div></td> 
<td ><div style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%">jb51.net</div></td> 
<td >广告部</td> 
<td >王天一</td> 
<td >现金</td> 
</tr > 
</table> 

 
<div id="my"></div> 
<div id="my2"></div> 
</body> 
</html> 


新建文件



作者:星辰 时间:2016-10-22 浏览 1018评论 0 赞 0砸 0 标签: 前端 demo css
评论
还可以再输入500个字

请您注意

·自觉遵守:爱国、守法、自律、真实、文明的原则
·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规
·严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的作品
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·您在NoteShare上发表的作品,NoteShare有权在网站内保留、转载、引用或者删除
·参与本评论即表明您已经阅读并接受上述条款