Hide/unhide changes cell size in firefox
I am trying to hide/unhide some table cells o a page, and I find that the cells are the same size before and after hiding and unhiding in Internet Explorer, but in both Firefox and Chrome, the cells containing my labels change size.
My page is actually more complicated than the following code, but I created this stripped down version to try and isolate the problem, asi it shows the problem without additional complications.
I've also tried both style="display: block;" and style="display: inline;" to unhide the elements.
Can anyone help me to understand why Firefox and Chrome alter the size?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript">
f开发者_如何转开发unction hide_them(){
TD_hide_them();
}
function TD_hide_them(){
// hide the TD
count=0;
while(document.getElementById("TD_"+count)){
document.getElementById("TD_"+count).style.display="none";
count++;
}
// hide the Input
count=0;
while(document.getElementById("Input_"+count)){
document.getElementById("Input_"+count).style.display="none";
count++;
}
}
function unhide_them(){
TD_unhide_them();
}
function TD_unhide_them(){
// hide the TD
count=0;
while(document.getElementById("TD_"+count)){
document.getElementById("TD_"+count).style.display="inline";
count++;
}
// hide the Input
count=0;
while(document.getElementById("Input_"+count)){
document.getElementById("Input_"+count).style.display="inline";
count++;
}
}
</script>
<style type="text/css">
TD.MYLabel {
background-color: #99D6EB;
vertical-align: top;
text-align:left;
width: 100px;
}
</style>
</head>
<body>
<p>
<table style="width:600px; background-color: yellow;">
<tr>
<td id="TD_0" class="MYLabel">Label 0</td><td><input type="text" id="Input_0"></td>
</tr>
<tr>
<td id="TD_1" class="MYLabel">Label 1 is longer</td><td><input type="text" id="Input_1"></td>
</tr>
</table>
<input type="button" onclick="hide_them()" value="hide_them">
<input type="button" onclick="unhide_them()" value="unhide_them">
</p>
</body>
</html>
Don't assume that "inline" is the default value of the display property. It isn't. So if you want to remove your "display: none;" override, simply set the display property back to what it was before, which is nothing.
function TD_unhide_them(){
// hide the TD
count=0;
while(document.getElementById("TD_"+count)){
document.getElementById("TD_"+count).style.display="";
count++;
}
// hide the Input
count=0;
while(document.getElementById("Input_"+count)){
document.getElementById("Input_"+count).style.display="";
count++;
}
}
I also noticed that using inline, and block will mess up the sizes in Firefox, but not in IE in my case I was trying to hide a whole row by applying the style to the TR element. and while it would hide it just fine it when un-hiding it was all squished.
found I needed to use:
document.getElementById("theid").style.display="table-row";
insted of
document.getElementById("theid").style.display="block";
or
document.getElementById("theid").style.display="inline";
it then kept the column sizes properly, I'm guessing that means if you hide a table cell then you should use
document.getElementById("theid").style.display="table-cell";
so that the cell's size is done properly, apparently by setting it to one of the other two options Firefox and Chrome will no longer treat it as part of the table it's in but treats it as if it was a separate item that just happens to be positioned there, allowing us to have elements in the table that aren't part of the table. But IE can't handle that, elements in the table have to be part of the table, so it reattaches it to the table. I'm not sure of a situation where that "feature" would be handy and not just confusing. but that seems to be what is going on.
加载中,请稍侯......
精彩评论