JAVASCRIPT高手进来看看这个问题

<html>
<head>
<title></title>
<script language="javascript">
<!--
function sty(id)
{
//id.style.display = id.style.display == "none" ? "block" : "none";

var h = document.getElementById( id );
if( h == null )
{
return;
}

h.style.display = h.style.display == "none" ? "block" : "none";
}

//h.style.display = h.style.display == "none" ? "block" : "none";
-->
</script>
<style type="text/css">
<!--
.STYLE1 {color: #FF0000}
-->
</style>
</head><body>
<table width="500" height="257" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td height="53" align="center" bgcolor="#999999" onClick="sty('h1')" style="cursor:hand"><span class="STYLE1">点击</span></td>
  </tr>
  <div id="h1" style="display:none">
    <tr style="cursor:hand" onClick="sty('h3')">
    <td>表格1</td>
  </tr>
  <tbody id="h3" style="display:none">
    <tr>
    <td height="30" bgcolor="#99FF00">表格1_1</td>
  </tr>
  <tr>
    <td bgcolor="#99FF00">表格1_2</td>
  </tr>
</tbody>
  <tr style="cursor:hand" onClick="sty('h4')">
    <td>表格2</td>
  </tr>
    <tbody id="h4" style="display:none">
    <tr>
    <td bgcolor="#99FF00">表格2_1</td>
  </tr>
  <tr>
    <td height="30" bgcolor="#99FF00">表格2_2</td>
  </tr>
  <tr style="cursor:hand" onClick="sty('h5')">
    <td>表格3</td>
  </tr>
    <tbody id="h5" style="display:none">
    <tr>
    <td height="50" bgcolor="#99FF00">表格3_1</td>
  </tr>
  <tr>
    <td bgcolor="#99FF00">表格3_2</td>
  </tr>
  </tbody>
</div>
   <tr>
    <td height="53" align="center" bgcolor="#666666"  style="cursor:hand"><span class="STYLE1">点击1</span></td>
  </tr>
    </table>
</body>
</html>
上面的程序，我想无“点击”和“点击1”之间的表格再长再多，但他们之间的距离保侍设定的距离永远不变，只能出现滚动条，请问怎么写，解决马上送分！！！