PDA

View Full Version : div's and table help

rfresh
03-16-2009, 04:51 PM
I have a 4 row table within a div. I'm trying to "roll up" the table so that only the first row is displayed when I click on a JS link. My JS event sets the div style.height to 170px which is about one row high. But the problem is that the table still shows 4 rows. So, I'm wondering if tables can be used within a div?

I have used this method successfully to resize a div section but it did not contain a table.

Thanks for any help...
tyhoerr
03-16-2009, 05:10 PM
add the "overflow: hidden;" attribute to the div css along with the specified height.

Divs automatically resize to fit the content within, even if a specified width and height have been defined. Telling it to hide any overflowing content will override this.
rfresh
03-16-2009, 05:45 PM
I still can't get it to hide the table:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<script type="text/javascript">
<!-- Hide javascript code
function expand_collapse_section()
{
document.getElementById("id_expand_collapse_section_container").style.height = "0px";
return;
}
// stop hiding javascript -->
</script>
<TITLE>Test</TITLE>
</HEAD>
<BODY>
<FORM>
<A HREF="javascript:expand_collapse_section()">collapse</A>
<div id="id_expand_collapse_section_container" style="overflow: hidden;">
<TABLE border=1>
<TR>
<TD>
aaaa
</TD>
</TR>
<TR>
<TD>
bbbb
</TD>
</TR>
</TABLE>
</div>
</HTML>
tyhoerr
03-16-2009, 06:25 PM
It's not a css issue- unfortunately it's IE...suprise.

For some reason IE doesn't like divs with 0px height and ignores it altogether, unless you also include the attribute "line-height: 0px;" along with it. Rather than do that though, I would just tell it to hide the div using "visibility: hidden;" with the following javascript:

document.getElementById("id_expand_collapse_section_container").style.visibility = "hidden";
return;

accomplishes the same thing without having to include both line height and height separately.
rfresh
03-16-2009, 06:53 PM
Very nice solution - thanks a lot...