Hide table with visibility attribute

**cbiti** · Jun 18, 2006 08:02

Greetings, I'm trying to change the visibility of a table by setting the (visibility = 'hidden') I don't need to keep the actual space of the table reserved when the visibility is hidden (I want to act similar to using display:none) Is there a way to do this? the reason why I'm choosing to use visibility instead of display is because when display is set to 'none' and then back to 'inline', your whole table structure and content get messed up.
I use visibility to hide a div and get around collapsing the space by setting the style.height = 1px. I tried doing this same thing with a table, but I'm not able to get it to work. Thanks.

**all4nerds** · Jun 18, 2006 08:06

Hello

try display:block;

**cbiti** · Jun 18, 2006 08:40

all4nerds, that didn't do it. other suggestions? Thanks.

**all4nerds** · Jun 18, 2006 08:43

Hello

Some code, Please ?

**cbiti** · Jun 18, 2006 09:09

Sure, here's the code I tried for what your recommended (display:block)
Note: I'm trying to get this to work in FF.

Code:

<!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>
<script language="javascript">
function Manage(NodeID)
{
	var oNode = document.getElementById(NodeID);
	if (oNode.style.display == 'block') { oNode.style.display = 'inline';}
	else {oNode.style.display = 'block';}
}
</script>
<body>
<table id="Tbl1" width="200" cellpadding="0" cellspacing="0" border="1">
<tr>
	<td valign="top" width="200">In this edition:</td>
</tr>
<tr>
	<td>Cell one</td>
</tr>
</table>
<label><input id="border" name="border" type="checkbox" value="Border" onChange="Manage('Tbl1');" checked="checked"> Show/Hide</label><br />
</body>
</html>

Thanks.

**all4nerds** · Jun 18, 2006 09:27

Hello

display none
display block

Code:

<!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>
<script language="javascript">
function Manage(NodeID)
{
	var oNode = document.getElementById(NodeID);
	if (oNode.style.display == 'none') { oNode.style.display = 'block';}
	else {oNode.style.display = 'none';}
}
</script>

</head>
<body>
<table id="tbl1" width="200" cellpadding="0" cellspacing="0" border="1" class="x">
<tr>
	<td valign="top" width="200">In this edition:</td>
</tr>
<tr>
	<td>Cell one</td>
</tr>
</table>
<label><input id="border" name="border" type="checkbox" value="Border" onchange="Manage('tbl1');" checked="checked" /> Show/Hide</label><br />
</body>
</html>

**cbiti** · Jun 18, 2006 10:00

It works in both IE and FireFox. This is what I was looking for. I appreciate your help with this. Thanks again.

**all4nerds** · Jun 18, 2006 10:03

Hello

IE needs a second click ?, execute ? why ?

**cbiti** · Jun 18, 2006 10:07

it works great.

**cbiti** · Jun 18, 2006 11:47

all4nerds, I'm trying to apply this code to a <td> instead of a <table>. check the checkbox few times and noticed how things start to change... Thanks.

Code:

<!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>
<script language="javascript">
function Manage(NodeID)
{
	var oNode = document.getElementById(NodeID);
	if (oNode.style.display == 'none') { oNode.style.display = 'block';}
	else {oNode.style.display = 'none';}
}
</script>

</head>
<body>
<table id="tbl1" width="200" cellpadding="0" cellspacing="0" border="1" class="x">
<tr>
	<td rowspan="2" id="Left">...</td>
	<td valign="top" width="200">In this edition:</td>
</tr>
<tr>
	<td id="td1">Cell one</td>
</tr>
</table>
<label><input id="border" name="border" type="checkbox" value="Border" onclick="Manage('td1');" checked="checked" /> Show/Hide</label><br />
</body>
</html>

User Tag List

Thread: Hide table with visibility attribute

Thread Tools

Display

Hybrid View

Hide table with visibility attribute

Bookmarks

Bookmarks

Posting Permissions