Html Table Row Alignment

Question

I am trying to show/hide rows on the basis of "Domain Type" selected(third combobox in the first row) ,which breaks the alignment. Here is the fiddle

How can I effectively show/hide rows and persist the alignment?

Thanks.

Answer 1

** EDIT **
To "hide" elements, use the "visibility" property instead of "display" property

For tables, use

style.visibility="collapse" and style.visibility="visible"

For all other elements, use

style.visibility="hidden" and style.visibility="visible"

Answer 2

use this

   <script>
      function getTypes()
      {
          if(document.getElementById("displayType").value.indexOf("rlo")!=-1)
             {
                 document.getElementById("secondRow").style.visibility="visible";
                 document.getElementById("thirdRow").style.visibility="collapse";

              }
          else
              {
                  if(document.getElementById("displayType").value.indexOf("ft")!=-1)
                     {
                      document.getElementById("secondRow").style.visibility="collapse";
                      document.getElementById("thirdRow").style.visibility="visible";
                      }
               }
           }
</script>