title: Table Row, can you set the height to zero?
body: <p>Can you set a table row height to 0?  IE 8, Chrome, Firefox, Opera.</p>
  
  <p>Why, you ask!  Well, I have a row which is dynamically built and displayed when a user clicks a parent row.  The trouble is that if there is no rows, when clicked, it still displays an empty 1 pixel high row.</p>
  
  <p>This is the child gridview:</p>
  
  <pre><code>&lt;asp:TemplateField HeaderStyle-CssClass="hidden-column" ItemStyle-CssClass="hidden-column" FooterStyle-CssClass="hidden-column"&gt;
                  &lt;ItemTemplate&gt;
                      &lt;tr&gt;
                          &lt;td colspan="8" &gt;
                              &lt;div id='&lt;%# Eval("PublicationID") %&gt;' style="display: none; position: relative;"&gt;
                                  &lt;asp:GridView ID="GridView2_ABPubs" runat="server" AutoGenerateColumns="false" Width="100%"
                                      DataKeyNames="PublicationID" Font-Names="Verdana" Font-Size="small"&gt;
                                      &lt;Columns&gt;
                                          &lt;asp:TemplateField&gt;
                                              &lt;ItemTemplate&gt;
                                                  &lt;asp:CheckBox ID="ChildPublicationSelector" runat="server" /&gt;
                                              &lt;/ItemTemplate&gt;
                                          &lt;/asp:TemplateField&gt;
                                          &lt;asp:BoundField DataField="NameAbbrev" HeaderText="Publication Name" SortExpression="NameAbbrev" /&gt;
                                      &lt;/Columns&gt;
                                  &lt;/asp:GridView&gt;
                              &lt;/div&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/ItemTemplate&gt;
              &lt;/asp:TemplateField&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.hidden-column 
  {
      display: none;  
  }
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>&lt;script language="JavaScript" type="text/javascript"&gt;
      var currentlyOpenedDiv = "";
      function CollapseExpand(object) {
          var div = document.getElementById(object);
          //if (currentlyOpenedDiv != "" &amp;&amp; currentlyOpenedDiv != div) {
          //    currentlyOpenedDiv.style.display = "none";
          //}
          if (div.style.display == "none") {
              div.style.display = "inline";
              currentlyOpenedDiv = div;
          }
          else {
              div.style.display = "none";
          }
      }
  &lt;/script&gt;
  </code></pre>