一个关于TABLE的问题

当我双击这个表格中的单元格出现文本框，但整个表格都在晃动，如何不让它晃动？？？
----------------------------------------------------------------------------------------------------------<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
    <title>无标题页</title>
    <style type="text/css">
    table{border-collapse:collapse;}
    body {text-align: center;}
    </style>
    <script language="javascript">
    function ReWritable()
    {
      var tbmain=document.getElementById("tbmain");
      for(var i=1;i<tbmain.rows.length-1;i++)
      {
         for(var j=0; j<tbmain.rows[i].cells.length;j++)
           {
                tbmain.rows[i].cells[j].ondblclick=TdDoubleClick;
           }
      }
    }
    
    function TdDoubleClick()
    {
    var tdcag=document.getElementById("tdcag");
    var tdid=null;
    var txtid=null;
    var curtd=window.event.srcElement;
    if (tdcag!=null)
    {
    return;
    }
    tdid=window.event.srcElement;
    tdtxt=tdid.innerText;
    tdtxt=Trim(tdtxt);
    var str="<div id='tdcag'><input type='text' onblur='ChangeTdText();' id='txtid' value='"+tdtxt+"' style='width:"+tdid.clientWidth+"' margin:0px padding:0px>";
   str+="<input type='hidden' id='tdinitValue' value='"+tdtxt+"'>";
    str+="</div>";   
    
    tdid.innerHTML=str;
    
    document.getElementById("txtid").focus();
    var ctr=document.getElementById("txtid").createTextRange();
    ctr.collapse(false);
    ctr.select();
    }
    
    function Trim(str)
    {
    return str.replace(/(^\s*)(\s*$)/g,""); 
    }
    
    document.onkeypress=function EscKeyPress()
    
    {
    if (event.keyCode==27)
    {
    CancelTdChanged();
    return;
    }
    }
    
    function CancelTdChanged()
    {
    var tdinitValue=document.getElementById("tdinitValue");
    var tdtxt=tdinitValue.value;
    var tdid=document.getElementById("tdcag").parentNode;
    tdid.innerText=Trim(tdtxt);
    }
    
    function ChangeTdText()
    {
    var txtid=document.getElementById("txtid");
    if (txtid==null)
    {
    return;
    }
    var tdid=document.getElementById("tdcag").parentNode;
    tdid.innerText=Trim(txtid.value);
    return;
    }
    
    </script>
</head>
<body onload="ReWritable();">
    <div style="margin:0px auto">
    <table id="tbmain" style="width:462px;" border="1">
    <thead>
    <tr>
    <td colspan="3" width="462px" style="background-color:#dadada">thead</td>
    </tr>      
    </thead>
    <tfoot>
    <tr>
    <td colspan="3" width="462px" style="background-color:#dadada">tfoot</td>
    </tr>
    </tfoot>   
    <tr>
    <td width="153px">11</td>
    <td width="153px">12</td>
    <td width="153px">13</td>
    </tr>
    <tr>
    <td width="153px">21</td>
    <td width="153px">22</td>
    <td width="153px">23</td>   
    </tr>
    <tr>
    <td style="width: 153px">31</td>
    <td style="width: 153px">32</td>
    <td style="width: 153px">33</td>
    </tr>
    </table>    
    </div>
</body>
</html>
——————————————————————————————————————————————————————