Table Row, can you set the height to zero?

Question

I'm curious,

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.

Thanks, R.

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>

Answer 1

I don't think the 0-row-height trick works perfectly, anyway - with Firefox and IE it makes a fatter border on the top of the table. This may not matter to you if you turn borders off (although I think you still get a blank 1 pixel row at the top of the table). Many web designers use spacer gifs (a 1x1 transparent gif, sized to the appropriate width) in their first row to get the same effect which solves both problems.

Answer 2

You can hide a row via display: none if you want, but I assume that browsers will always give boxes a minimum height of 1px

Answer 3

A good starting point would be to set overflow:hidden on the style for the <td> elements.