Problem with Border-Collapse on Table!!!!!!!!

[dmayfield]

I have a <div> that contains 2 tables. I want to start off with this <div> as hidden...Then when I click on the link it pops-up the two tables. I am having trouble with the border appearance of the tables.

When the border-collapse property is set to &quot;collapse,&quot; it shows the borders on the screen even though the table is hidden.

When the border-collapse property is set to &quot;seperate,&quot; it doesn't show the borders on the screen when the table is hidden, but it makes the borders look different when I show the table.

I want the appearance of the 1st table when 'hidden' and the 2nd table when 'visible.'

Please try my HTML...

Here it is:

<script language=&quot;Javascript&quot;>
function shwMenu()
{
document.all.div1.style.visibility = 'visible';
}
</script>

<a href=&quot;javascript:shwMenu();&quot;>Show Menus</a>
<br><br>

<div id=&quot;div1&quot; style=&quot;visibility: hidden&quot;>
<table id=&quot;tmenu1&quot; width=&quot;157&quot; border=&quot;1&quot; bordercolor=&quot;#0000CC&quot; cellspacing=&quot;0&quot; style=&quot;border-collapse: seperate&quot;>
<tr><td bgcolor=&quot;#6E1EAC&quot; height=&quot;10&quot; ></td></tr>
<tr><td bgcolor=&quot;#DDCCEE&quot;>Item 1</td></tr>
<tr><td bgcolor=&quot;#DDCCEE&quot;>Item 2</td></tr>
<tr><td bgcolor=&quot;#6E1EAC&quot; height=&quot;10&quot; ></td></tr>
</table>
<br><br>
<table id=&quot;tmenu2&quot; width=&quot;157&quot; border=&quot;1&quot; bordercolor=&quot;#0000CC&quot; cellspacing=&quot;0&quot; style=&quot;border-collapse: collapse&quot;>
<tr><td bgcolor=&quot;#6E1EAC&quot; height=&quot;10&quot; ></td></tr>
<tr><td bgcolor=&quot;#DDCCEE&quot;>Item 1</td></tr>
<tr><td bgcolor=&quot;#DDCCEE&quot;>Item 2</td></tr>
<tr><td bgcolor=&quot;#6E1EAC&quot; height=&quot;10&quot; ></td></tr>
</table>
</div>

 

[dmayfield]

I came up with a solution:

Use the 2nd table - style=&quot;border-collapse: collapse&quot; and set the border to 0. Give the table an id. Then before you show the table, change the border to 1.



<script language=&quot;Javascript&quot;>
function shwMenu()
{
document.all.tmenu2.border = 1;
document.all.div1.style.visibility = 'visible';
}
</script>

<a href=&quot;javascript:shwMenu();&quot;>Show Menus</a>
<br><br>

<div id=&quot;div1&quot; style=&quot;visibility: hidden&quot;>
<table id=&quot;tmenu2&quot; width=&quot;157&quot; border=&quot;0&quot; bordercolor=&quot;#0000CC&quot; cellspacing=&quot;0&quot; style=&quot;border-collapse: collapse&quot;>
<tr><td bgcolor=&quot;#6E1EAC&quot; height=&quot;10&quot; ></td></tr>
<tr><td bgcolor=&quot;#DDCCEE&quot;>Item 1</td></tr>
<tr><td bgcolor=&quot;#DDCCEE&quot;>Item 2</td></tr>
<tr><td bgcolor=&quot;#6E1EAC&quot; height=&quot;10&quot; ></td></tr>
</table>
</div>

 

[Guest_imported]

I am using DHTML layer function to do a expand and collapse table. The problem is i cannot hide list box in layer.

When i expand my table, the details and list box come out. But when i close it, the list box cannot hide in the layer.

I tried use another layer to cover the list box but not successful. Can someone help me solve the problem?