title: Show and hide rows in a table - things are getting shifted around
body: <p>I've got some fields with labels I've put into a table for layout purposes. There's a drop down selection which shows/hides rows in the table depending on the selection. My code is working just the way I want it in IE9, but in Chrome and Firefox, every time a row that was previously hidden is shown, the contents of the row are shifted way out of position. </p>
  
  <p>There are several fields and multiple selections (which I've trimmed down in the code below), so I'm using a switch statement to tell it what to show and hide. How do I make Chrome and Firefox work like IE9 so that the row contents don't move around when they are displayed?</p>
  
  <pre><code>&lt;HTML&gt;
  &lt;HEAD&gt;
  &lt;/HEAD&gt;
  &lt;BODY&gt;
  &lt;FORM ACTION="#" name=form&gt;
  &lt;select name="type" onchange="changeTable()"&gt;
  &lt;option value="A"&gt;A&lt;/option&gt;
  &lt;option value="B"&gt;B&lt;/option&gt;
  &lt;/select&gt;
  &lt;BR&gt;
  &lt;table ID="options"&gt;
  &lt;tr&gt;
  &lt;td&gt;A, B, C, D&lt;/td&gt;
  &lt;td&gt;&lt;input type=text name="1" size=20 maxlength="20"&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr ID = "A2"&gt;
  &lt;td&gt;A&lt;/td&gt;
  &lt;td&gt;&lt;input type=text name="2" size=20 maxlength="20"&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;A, B, C, D&lt;/td&gt;
  &lt;td&gt;&lt;input type=text name="3" size=10 maxlength="10"&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr ID="A4" style="display:none"&gt;
  &lt;td&gt;B, D&lt;/td&gt;
  &lt;td&gt;&lt;input type=text name="4" size=10 maxlength="10"&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr ID="A5"&gt;
  &lt;td&gt;A&lt;/td&gt;
  &lt;td&gt;&lt;select name="5"&gt;
  &lt;option value="0"&gt;0&lt;/option&gt;
  &lt;option value="1"&gt;1&lt;/option&gt;
  &lt;option value="2"&gt;2&lt;/option&gt;
  &lt;option value="3"&gt;3&lt;/option&gt;
  &lt;/select&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr ID="A6" style="display:none"&gt;
  &lt;td&gt;A&lt;/td&gt;
  &lt;td&gt;&lt;input type=text name="6" size=20&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;script&gt;
  function changeTable(){
  var type = document.form.type.value;
  
      switch(type){
  
  case "A": 
      document.getElementById("A2").style.display = 'block';
      document.getElementById("A4").style.display = "none";   
      document.getElementById("A7").style.display = 'none';
      document.getElementById("A8").style.display = 'none';
      document.getElementById("A9").style.display = 'none';
      document.getElementById("A5").style.display = "block";  
      break;
  
  case "B": 
      document.getElementById("A2").style.display = 'none';
      document.getElementById("A4").style.display = "block";
      document.getElementById("A7").style.display = 'none';
      document.getElementById("A8").style.display = 'none';
      document.getElementById("A9").style.display = 'none';
      document.getElementById("A5").style.display = "none";
      document.getElementById("A6").style.display = "none";
      break;
  }
  }
  &lt;/script&gt;
  &lt;/BODY&gt;
  &lt;/HTML&gt; 
  </code></pre>