Table Row, can you set the height to zero?

html

Solution

td {
    line-height: 0;
    padding: 0;
}
tr {
    border-spacing: 0;
}

Problem

Can you set a table row height to 0? IE 8, Chrome, Firefox, Opera. 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. This is the child gridview: ``` <asp:TemplateField HeaderStyle-CssClass="hidden-column" ItemStyle-CssClass="hidden-column" FooterStyle-CssClass="hidden-column"> <ItemTemplate> <tr> <td colspan="8" > <div id='<%# Eval("PublicationID") %>' style="display: none; position: relative;"> <asp:GridView ID="GridView2_ABPubs" runat="server" AutoGenerateColumns="false" Width="100%" DataKeyNames="PublicationID" Font-Names="Verdana" Font-Size="small"> <Columns> <asp:TemplateField> <ItemTemplate> <asp:CheckBox ID="ChildPublicationSelector" runat="server" /> </ItemTemplate> </asp:TemplateField> <asp:BoundField DataField="NameAbbrev" HeaderText="Publication Name" SortExpression="NameAbbrev" /> </Columns> </asp:GridView> </div> </td> </tr> </ItemTemplate> </asp:TemplateField> ``` CSS: ``` .hidden-column { display: none; } ``` JavaScript: ``` <script language="JavaScript" type="text/javascript"> var currentlyOpenedDiv = ""; function CollapseExpand(object) { var div = document.getElementById(object); //if (currentlyOpenedDiv != "" && currentlyOpenedDiv != div) { // currentlyOpenedDiv.style.display = "none"; //} if (div.style.display == "none") { div.style.display = "inline"; currentlyOpenedDiv = div; } else { div.style.display = "none"; } } </script> ```

Original source