Home/ Questions/Q 5935181
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T15:13:04+00:00

I am trying to hide/unhide some table cells o a page, and I find

  • 0

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"> 

function 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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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++;
        }
}
    • 0