鼠标拖动调整列宽的js程序,大体的要求是控制table的总宽度不变,拖动表格列的时候只改变当前列和它之后相邻列的宽度,其他的表格列不受影响。
实现思路:每一列中用一个span来响应拖动事件,在onmousemove事件中计算当前列和其后相邻列的宽度变化并赋予每列新的宽度值。
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
table{
border-left:1px solid black;
width:100%;
border-top:1px solid black
}
td{
border-bottom:1px solid black;
border-right:1px solid black;
white-space:nowrap; /*不换行*/
overflow:hidden;
text-overflow:ellipsis; /*文本超出部分用"..."代替*/
}
.resizeDivClass{
PADDING-RIGHT: 0px;
MARGIN-RIGHT: 0px;
float:right;
cursor:e-resize;
HEIGHT: 100%;
width:2px;
}
</style>
<script language="javascript" type="text/javascript">
var dragobj=null; //保存用户选择的"span"
//handle onmousedown event
function MouseDow