display:none in tables - not completely hidden?

Having problems completely hiding cells using display:none

[dobby]

Hopefully someone can help.....I'm basically trying to create an expandable menu within a table, using display: none and display: block, eg if you click on the heading, the sub headings become visible. This works fine, but the problem is it seems to add an extra row (1px) when the cell is hidden. Given that the number of sub headings under each main heading vary from 3 to 18, the result is quite messy!

I've played around with padding, spacing, border-collapse etc., but not having any luck.....

Code below:

Stylesheet:

TABLE.menu {border-color: #064375; border-style: solid; border-width: 1px; border-collapse: collapse; align: left}
TD.Mmenutitle {font-family: arial; font-size: 12px; color: rgb(255,255,255);border-color: #064375; border-style: solid; border-width: 0px; font-weight: bold;text-align: left; cursor: hand; empty-cells: hide}
TD.submenu {font-family: arial; font-size: 12px; color: #064375;border-width: 0px;text-align: left; display:none; empty-cells: hide; border-collapse: collapse}

Table:

<table class="menu" width="160px" border="0px" cellspacing="0px" cellpadding="0px">
<tr><td class="Mmenutitle" bgcolor="rgb(6,67,117)" onclick="expandmenu('a',6)">Heading 1</td></tr>
<tr><td class="submenu" id="a2">&nbsp;-&nbsp;<a class="menu" href="" target="MainFrame">Sub 1</a></td></tr>

Script:

function expandmenu(sub,range)
{
var count = 1
while (count <= range)
{
change = sub
change += count
document.getElementById(change).style.display='block'
count++;
}
}

[Alternative Future]

Not got much time to look over it!

But have you tried putting the display:none into the <tr> rather than the <td>?

HTH,

-gs

[dobby]

I hadn't, but I have now - works perfectly!

Thanks! :-) :-)