两个table同时拖动边框

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
table
{
    background-color:#808080;
    font-size:12px; line-height:20px;
    table-layout:fixed;
}
td
{
    background-color:#fff;
}
.tit
{
    border-left:1px solid #fff;
    border-top:1px solid #fff;
    background-color:#d6d3ce;
    text-align:center;
    clear:both;
}
.mover
{
    float:right;
    overflow:hidden;
    width:5px; height:100%;
    cursor:col-resize;
}
.lable
{
    float:left;
    margin-left:2px;
}
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
function gridMousedown(obj,e){
        
        var defaultWidth = obj.offsetWidth;
        var defaultLeft = e.clientX;
        var handleObj = obj;
        if (!obj.initWidth) obj.initWidth = obj.offsetWidth;
        document.onmousemove = function ()
        {
            var initWidth = handleObj.initWidth;
            var newWidth = defaultWidth + (e.clientX-defaultLeft);
            newWidth = newWidth<initWidth?initWidth:newWidth;
    if(newWidth>200)
    {
newWidth=200;
    }
            handleObj.width = newWidth;
        };
        document.onmouseup = function ()
        {
            document.onselectstart = document.onmousemove = document.onmouseup = null;
        };
        document.onselectstart = function ()
        {
            return false;
        };
    }
</script>
</HEAD><BODY><table cellspacing="1" cellpadding="0" border="0">
    <tr>
        <td width="50" class="tit" >                
            <div class="mover"  onmousedown="gridMousedown(this.parentNode, event)"></div>  
            <div class="lable">标题1</div>            
        </td>
        <td width="50" class="tit" >                
            <div class="mover"  onmousedown="gridMousedown(this.parentNode, event)"></div>  
            <div class="lable">标题2</div>            
        </td>
        <td width="90" class="tit">                
            <div class="mover" onmousedown="gridMousedown(this.parentNode, event)"></div>  
            <div class="lable">标题3</div>            
        </td>
        <td width="50" class="tit">                
            <div class="mover" onmousedown="gridMousedown(this.parentNode, event)"></div>  
            <div class="lable">标题4</div>            
        </td>
        <td width="50" class="tit">                
            <div class="mover" onmousedown="gridMousedown(this.parentNode, event)"></div>    
            <div class="lable">标题5</div>            
        </td>
        <td width="80" class="tit">                
            <div class="mover" onmousedown="gridMousedown(this.parentNode, event)"></div>  
            <div class="lable">标题6</div>            
        </td>
        <td width="50" class="tit">                
            <div class="mover" onmousedown="gridMousedown(this.parentNode, event)"></div>  
            <div class="lable">标题7</div>
        </td>
    </tr>
</table>
<table cellspacing="1" cellpadding="0" border="0">
    <tr><td width="50"><div class="mover"  onmousedown="gridMousedown(this.parentNode, event)"></div>aaa</td><td width="50">aaa</td><td width="90">aaa</td><td width="50">aaa</td><td width="50">aaa</td><td width="80">aaa</td><td width="50">ddd</td></tr>
    <tr><td width="50">bbb</td><td width="50">bbb</td><td width="90">bbb</td><td width="50">bbb</td><td width="50">bbb</td><td width="80">bbb</td><td width="50">bbb</td></tr>
    <tr><td width="50">ccc</td><td width="50">ccc</td><td width="90">ccc</td><td width="50">ccc</td><td width="50">ccc</td><td width="80">ccc</td><td width="50">ccc</td></tr>
    <tr><td width="50">ddd</td><td width="50">ddd</td><td width="90">ddd</td><td width="50">ddd</td><td width="50">ddd</td><td width="80">ddd</td><td width="50">ddd</td></tr>
</table></BODY>
</HTML>