table leaving gap when set to display:none

hi,
i'm trying to hide/show some content on a page, but when i try setting
a table to style.display:none it seems to be leaving a gap, as if
something is still there. here is a sample of what i have:

<table width="100%" id="Needthis"><tr ><td >

<table id='TD0'>
<tr>
<td>
<div style="width:365px">
<table width="100%" border="0"
cellspacing="0" cellpadding="0">
<tr>
<td>
<div ><img src="/images/
asdsa.jpg" width="94" height="94" /></div>
<div >
<div><span >XYZ</span><br />
<span ></span></div>
<div >asdsada</div>
<div><a href="#" >View
details</a></div>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>



</td><td >


<table id='TD1'>
<tr>
<td>
<div style="width:365px">
<table width="100%" border="0"
cellspacing="0" cellpadding="0">
<tr>
<td>
<div ><img src="/images/
asdsa.jpg" width="94" height="94" /></div>
<div >
<div><span >XYZ</span><br />
<span ></span></div>
<div >asdsada</div>
<div><a href="#" >View
details</a></div>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</
table>



</td></tr><tr ><td id='Td2'>


<table id='TD2'>
<tr>
<td>
<div style="width:365px">
<table width="100%" border="0"
cellspacing="0" cellpadding="0">
<tr>
<td>
<div ><img src="/images/
asdsa.jpg" width="94" height="94" /></div>
<div >
<div><span >XYZ</span><br />
<span ></span></div>
<div >asdsada</div>
<div><a href="#" >View
details</a></div>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</
table>




</td><td id='Td3'>


<table id='TD3'>
<tr>
<td>
<div style="width:365px" >
<table width="100%" border="0"
cellspacing="0" cellpadding="0">
<tr>
<td>
<div ><img src="/images/
asdsa.jpg" width="94" height="94" /></div>
<div >
<div><span >XYZ</span><br />
<span ></span></div>
<div >asdsada</div>
<div><a href="#" >View
details</a></div>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>



</td></tr><tr ><td id='Td4'>



<table id='TD4'>
<tr>
<td>
<div style="width:365px">
<table width="100%" border="0"
cellspacing="0" cellpadding="0">
<tr>
<td>
<div ><img src="/images/
asdsa.jpg" width="94" height="94" /></div>
<div >
<div><span >XYZ</span><br />
<span ></span></div>
<div >asdsada</div>
<div><a href="#" >View
details</a></div>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</
table>



</td><td id='Td5'>


<table id='TD5'>
<tr>
<td>
<div style="width:365px">
<table width="100%" border="0"
cellspacing="0" cellpadding="0">
<tr>
<td>
<div ><img src="/images/
asdsa.jpg" width="94" height="94" /></div>
<div >
<div><span >XYZ</span><br />
<span ></span></div>
<div >asdsada</div>
<div><a href="#" >View
details</a></div>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>


</td></tr></table>
<table>
<tr>
<td><input type="button" value="Click me"
onclick="hideshow()"; /></td>
</tr>
</table>

<noxhtml>
</div>




<script language="javascript">
<!--
function hideshow()
{
document.getElementById("TD0").style.display = "none";
document.getElementById("TD1").style.display = "none";
}
</script>



If you copy/paste that and hit the button you'll see the 1st 2 go
away, like they should, but when the next two move up, there is a
slight gap, they're not sitting where the 1st 2 were, it's just below
it. If you have Internet explorer's developer tool bar and use that
to hightlight the table cells you'll see the original two that were
suppose to be display:none are still occupying some space. Anyway
around this, without modifying the structure, as i need to keep the
main table "Needthis" alone, i can modify the pieces in each cell
though, like the tables TD0 and TD1.

Thanks.

On Mon, 04 Feb 2008 21:24:53 +0100, <soni2926 (AT) yahoo (DOT) com> wrote:

hi,
i'm trying to hide/show some content on a page, but when i try setting
a table to style.display:none it seems to be leaving a gap, as if
something is still there. here is a sample of what i have:

table width="100%" id="Needthis"><tr ><td

<SNIP>

If you copy/paste that and hit the button you'll see the 1st 2 go
away, like they should, but when the next two move up, there is a
slight gap, they're not sitting where the 1st 2 were, it's just below
it.

If I copy & paste this, it is most likely an invalid page, and at least
will be rendered in quircks mode. Could you put up the page on a server
(and make sure it's valid)?
--
Rik Wasmus

On Feb 4, 9:24 pm, soni2... (AT) yahoo (DOT) com wrote:

hi,
i'm trying to hide/show some content on a page, but when i try setting
a table to style.display:none it seems to be leaving a gap, as if
something is still there. here is a sample of what i have:
you are not hidding the cells, right, but the contained tables. If you

simply remove the tables to test this, the empty cells will probably
occupy the space that you see left over after you hide the tables.

<soni2926 (AT) yahoo (DOT) com> wrote

hi,

<snip code>

You will not get an answer on this without providing a URL to what you have.
It is probably not in the bit of code you have pasted.

--
Richard.