Table Row, can you set the height to zero?

Question

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>

Answer 1

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

Answer 2

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.