里面是一个可以运行的页面:
<html>
<head>
<style>
.resizeDivClass
{
position:relative;
background-color:red;
width:4;
height:30;
z-index:1;
left:expression(this.parentElement.offsetWidth - 3);
cursor:e-resize;
}
.resizeDivClass2
{
position:relative;
width:expression(this.parentElement.offsetWidth);
height:1px;
border: solid 0px;
z-index:1;
top:expression(this.parentElement.offsetHeight-3);
cursor:n-resize;
}
</style>
<script language=javascript>
function MouseDownToResize(obj)
{
obj.mouseDownX=event.clientX;//当前鼠标位置的X值
obj.pareneTdW=obj.parentElement.offsetWidth;//列的宽度
obj.pareneTableW=theObjTable.offsetWidth; //table的宽度,整个宽度
obj.setCapture();
//top <!--//距离bordre边界的高度-->
//alert(obj.parentElement.offsetWidth);
//alert(theObjTable.offsetWidth);
}
function MouseMoveToResize(obj) //事件会在鼠标指针移动时发生
{
if(!obj.mouseDownX)
{
return false;
}
var newWidth=obj.pareneTdW*1+event.clientX*1-obj.mouseDownX;
if(newWidth>0)
{
obj.parentElement.style.width = newWidth;
theObjTable.style.width=obj.pareneTableW*1+event.clientX*1-obj.mouseDownX;
}
}
function MouseUpToResize(obj) //事件会在鼠标按键放开时发生
{
obj.releaseCapture();
/*
setCapture函数的作用就是将后续的mouse事件都发送给这个对 象,releaseCapture就是将鼠标事件还回去,由 document、window、object之类的自行来处理,这样就保证了在拖动的过程中,不会由于经过了其它的元素而受到干扰
object.setCapture() 当一个object的被 setCapture 后,他的方法将会被继承到整个文档进行捕获。
当不需要把方法继承到整个文档捕获时,要用 object.releaseCapture()
*/
obj.mouseDownX=0;
}
function MouseDownToResize2(obj) //事件会在鼠标按下时发生
{
obj.mouseDownY = event.clientY;
obj.pareneTrH = obj.parentElement.offsetHeight;//行的高度
obj.pareneTableH=theObjTable.offsetHeight;// //获得table的高度
obj.setCapture();
}
function MouseMoveToResize2(obj)
{
if(!obj.mouseDownY)
{
return false;
}
var newWidth = obj.pareneTrH * 1 + event.clientY * 1 - obj.mouseDownY;
if(newWidth > 0)
{
obj.parentElement.style.height = newWidth;
theObjTable.style.height = obj.pareneTableH * 1 + event.clientY * 1 - obj.mouseDownY;
}
}
function MouseUpToResize2(obj)
{
obj.releaseCapture();
obj.mouseDownY=0;
}
</script>
</head>
<body>
改变table的列宽度
<table id=theObjTable STYLE="table-layout:fixed" border="1" >
<!--table-layout : auto | fixed
取值:
auto : 默认值。默认的自动算法。布局将基于各单元格的内容。表格在每一单元格内所有内容读取计算之后才会显示出来
fixed : 固定布局的算法。在这种算法中,表格和列的宽度取决于 col 对象的宽度总和,假如没有指定,则会取决于第一行每个单元格的宽度。假如表格没有指定宽
( width )属性,则表格被呈递的默认宽度为 100% 。
onmousemove 事件会在鼠标指针移动时发生。
-->
<tr bgcolor=cccccc >
<td valign=top >
<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>
<div class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></div>
aaa
</td>
<td valign=top >
<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>
<div class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></div>ddd
</td>
<td valign=top >
<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>
<div class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></div>ddd
</td>
</tr>
<tr>
<td valign=top >
<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>
快乐不是因为拥有的多,而是计较的少。
</td>
<td valign=top >
<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>
bbbb
</td>
<td valign=top >
<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>
dddd
</td>
</tr>
<tr>
<td valign=top >
<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>快乐不是因为拥有的多,而是计较的少。
</td>
<td valign=top >
<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>
bbbb
</td>
<td valign=top >
<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>
dddd
</td>
</tr>
<tr>
<td valign=top >
<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>快乐不是因为拥有的多,而是计较的少。
</td>
<td valign=top >
<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>
bbbb
</td>
<td valign=top >
<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>
dddd
</td>
</tr>
<tr>
<td valign=top >
<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>快乐不是因为拥有的多,而是计较的少。
</td>
<td valign=top >
<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>
bbbb
</td>
<td valign=top >
<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>
dddd
</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<style>
.resizeDivClass
{
position:relative;
background-color:red;
width:4;
height:30;
z-index:1;
left:expression(this.parentElement.offsetWidth - 3);
cursor:e-resize;
}
.resizeDivClass2
{
position:relative;
width:expression(this.parentElement.offsetWidth);
height:1px;
border: solid 0px;
z-index:1;
top:expression(this.parentElement.offsetHeight-3);
cursor:n-resize;
}
</style>
<script language=javascript>
function MouseDownToResize(obj)
{
obj.mouseDownX=event.clientX;//当前鼠标位置的X值
obj.pareneTdW=obj.parentElement.offsetWidth;//列的宽度
obj.pareneTableW=theObjTable.offsetWidth; //table的宽度,整个宽度
obj.setCapture();
//top <!--//距离bordre边界的高度-->
//alert(obj.parentElement.offsetWidth);
//alert(theObjTable.offsetWidth);
}
function MouseMoveToResize(obj) //事件会在鼠标指针移动时发生
{
if(!obj.mouseDownX)
{
return false;
}
var newWidth=obj.pareneTdW*1+event.clientX*1-obj.mouseDownX;
if(newWidth>0)
{
obj.parentElement.style.width = newWidth;
theObjTable.style.width=obj.pareneTableW*1+event.clientX*1-obj.mouseDownX;
}
}
function MouseUpToResize(obj) //事件会在鼠标按键放开时发生
{
obj.releaseCapture();
/*
setCapture函数的作用就是将后续的mouse事件都发送给这个对 象,releaseCapture就是将鼠标事件还回去,由 document、window、object之类的自行来处理,这样就保证了在拖动的过程中,不会由于经过了其它的元素而受到干扰
object.setCapture() 当一个object的被 setCapture 后,他的方法将会被继承到整个文档进行捕获。
当不需要把方法继承到整个文档捕获时,要用 object.releaseCapture()
*/
obj.mouseDownX=0;
}
function MouseDownToResize2(obj) //事件会在鼠标按下时发生
{
obj.mouseDownY = event.clientY;
obj.pareneTrH = obj.parentElement.offsetHeight;//行的高度
obj.pareneTableH=theObjTable.offsetHeight;// //获得table的高度
obj.setCapture();
}
function MouseMoveToResize2(obj)
{
if(!obj.mouseDownY)
{
return false;
}
var newWidth = obj.pareneTrH * 1 + event.clientY * 1 - obj.mouseDownY;
if(newWidth > 0)
{
obj.parentElement.style.height = newWidth;
theObjTable.style.height = obj.pareneTableH * 1 + event.clientY * 1 - obj.mouseDownY;
}
}
function MouseUpToResize2(obj)
{
obj.releaseCapture();
obj.mouseDownY=0;
}
</script>
</head>
<body>
改变table的列宽度
<table id=theObjTable STYLE="table-layout:fixed" border="1" >
<!--table-layout : auto | fixed
取值:
auto : 默认值。默认的自动算法。布局将基于各单元格的内容。表格在每一单元格内所有内容读取计算之后才会显示出来
fixed : 固定布局的算法。在这种算法中,表格和列的宽度取决于 col 对象的宽度总和,假如没有指定,则会取决于第一行每个单元格的宽度。假如表格没有指定宽
( width )属性,则表格被呈递的默认宽度为 100% 。
onmousemove 事件会在鼠标指针移动时发生。
-->
<tr bgcolor=cccccc >
<td valign=top >
<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>
<div class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></div>
aaa
</td>
<td valign=top >
<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>
<div class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></div>ddd
</td>
<td valign=top >
<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>
<div class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></div>ddd
</td>
</tr>
<tr>
<td valign=top >
<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>
快乐不是因为拥有的多,而是计较的少。
</td>
<td valign=top >
<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>
bbbb
</td>
<td valign=top >
<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>
dddd
</td>
</tr>
<tr>
<td valign=top >
<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>快乐不是因为拥有的多,而是计较的少。
</td>
<td valign=top >
<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>
bbbb
</td>
<td valign=top >
<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>
dddd
</td>
</tr>
<tr>
<td valign=top >
<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>快乐不是因为拥有的多,而是计较的少。
</td>
<td valign=top >
<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>
bbbb
</td>
<td valign=top >
<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>
dddd
</td>
</tr>
<tr>
<td valign=top >
<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>快乐不是因为拥有的多,而是计较的少。
</td>
<td valign=top >
<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>
bbbb
</td>
<td valign=top >
<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>
dddd
</td>
</tr>
</table>
</body>
</html>