I have a table I hide show/hide through a pair of divs. The show/hide
part works fine in both Mozilla and MSIE. When switching between the
hide and show versions the Mozilla browser keeps them in small width,
about 740 pixels.
When switching between show/hide with MSIE the "show" table wants to
display about 960 pixels. If I set the outer table to '
style="table-layout: fixed;" ' then MSIE chooses to force the width to
960 pixels.
When I remove the ' width="XXX" ' clauses the table displays small, as
with Mozilla. Problem is, I want the columns to squish to the left as
much as possible.
So my question is two sided:
* Can I make MSIE behave with the "width" clauses, so it keeps actual
displayed width at 740?
* Can I make the columns squish to the left (minimize white space
between columns by forcing maximum white space to the right of all of
the columns) through some other means (stylesheet)?
Thanks very much,
Jerome.
What follows is a stripped-down example that does the bad tricks:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<SCRIPT language="javascript">
function minMaxData(min, max) {
document.getElementById(min).style.display = "none";
document.getElementById(max).style.display = "inline";
}
function maxData(max) {
document.getElementById(max).style.display = "inline";
}
</SCRIPT>
</HEAD>
<BODY>
<DIV align="center">
<FORM name="sampleOrderForm" method="post">
<DIV id="infoMin" style="DISPLAY: inline">
<TABLE borderColor="black" width="740" border="1">
<TBODY>
<TR>
<TD align="left" width="20%"> </TD>
<TD align="middle" width="60%"><B>ATTACHMENT INFO</B></TD>
<TD align="right" width="20%" nowrap>
click to add attachments ->
<A href="javascript:minMaxData('infoMin',
'infoMax');">[max]</A>
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
<DIV id="infoMax" style="DISPLAY: none">
<TABLE borderColor="black" width="740" border="1">
<TBODY>
<TR>
<TD>
<TABLE width="100%" border="1" bordercolor="black">
<TBODY>
<TR>
<TD align="left" width="20%"> </TD>
<TD align="center" width="60%">
<B>ATTACHMENT INFO</B>
</TD>
<TD align="right" width="20%">
<A href="javascript:minMaxData('infoMax',
'infoMin');">[min]</A>
</TD>
</TR>
</TBODY>
</TABLE>
<TABLE width="100%" border="2" bgcolor="#00FF00">
<TBODY>
<TR>
<TD width="2%" bgcolor="#FFFF00"> </TD>
<TD width="10%" bgcolor="#FF00FF"> Name</TD>
<TD width="10%" bgcolor="#00FFFF"> Uploaded</TD>
<TD width="10%" bgcolor="#FFCC22"> Expired</TD>
<TD width="68%" bgcolor="#CCCCDD"> </TD>
</TR>
<TR>
<TD>4) </TD>
<TD><INPUT size="50" name="attachment4"> </TD>
<TD><INPUT size="10" name="uploadDate4"> </TD>
<TD><INPUT size="10" name="expireDate4"> </TD>
<TD><FONT color="red"><B> </B></FONT> </TD>
</TR>
<TR>
<TD width="2%"> </TD>
<TD width="98%" colSpan="4">
<INPUT size="98" name="source4">
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
</FORM>
</DIV>
</BODY>
</HTML>
