为什么JS设的坐标不对，有点奇怪

以下代码可以正常运行，当我取出main_table的left时是124，为什么我把div设到124的位置时，这二个对象的实际显示位置确有些出入呢？不太明白。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
left:124px;
top:116px;
width:127px;
height:153px;
z-index:1;
}
-->
</style>
</head><body><table id="main_table" width="80%" border="1" align="center" cellpadding="0" cellspacing="0" onclick="Table_WZ(this);">
  <tr>
    <td bgcolor="#0000FF" onmouseenter="wz(this);">&nbsp;</td>
    <td bgcolor="#FF00FF" onmouseenter="wz(this);">&nbsp;</td>
    <td bgcolor="#FF00FF" onmouseenter="wz(this);">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table><div id="Layer1">
  <table width="100%" border="1" cellspacing="0" cellpadding="0">
    <tr>
      <td width="13%">&nbsp;</td>
      <td width="87%">可耕地</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>埼</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>英雄模范</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>睚</td>
    </tr>
  </table>
</div>
</body>
<script>function wz(obj)
{
    document.getElementById("Layer1").style.display="block";
    document.getElementById("Layer1").style.left=obj.offsetLeft+main_table.offsetLeft; 
    document.getElementById("Layer1").style.top =obj.offsetTop+obj.offsetHeight*2-1; 
}
function Table_WZ(obj)
{
  alert (obj.offsetLeft);
}
</script>
</html>