Table Row, can you set the height to zero?

问题:

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>

回答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.

回答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

回答3:

since I must have 50 rep to comment, I'll post an answer.

I think what you want can be done with plain javascript, I've used an example of fruit. hope you don't mind.

Click on This Fiddle to see what the code below does. And if it's what you want. :)

javascript:

$(document).ready(function(){
$(".toggler").click(function(e){
    e.preventDefault();
    $('.fruit'+$(this).attr('data-prod-fruit')).toggle();
});

});

Html:

<table>
<tr>
    <td>Product</td>
    <td>Price</td>
    <td>Destination</td>
    <td>Updated on</td>
</tr>
<tr>
    <td>Oranges</td>
    <td>100</td>
    <td><a href="#" class="toggler" data-prod-fruit="1">+ On Store</a></td>
    <td>22/10</td>
</tr>
<tr class="fruit1" style="display:none">
    <td></td>
    <td>120</td>
    <td>City 1</td>
    <td>22/10</td>
</tr>
<tr class="fruit1" style="display:none">
    <td></td>
    <td>140</td>
    <td>City 2</td>
    <td>22/10</td>
</tr>
<tr>
    <td>Apples</td>
    <td>100</td>
    <td><a href="#" class="toggler" data-prod-fruit="2">+ On Store</a></td>
    <td>22/10</td>
</tr>
<tr class="fruit2" style="display:none">
    <td></td>
    <td>120</td>
    <td>City 1</td>
    <td>22/10</td>
</tr>
<tr class="fruit2" style="display:none">
    <td></td>
    <td>140</td>
    <td>City 2</td>
    <td>22/10</td>
</tr>

and some CSS to make it look pretty:

table{
    border-collapse: collapse;
    border-style: hidden;
    margin:0 auto 0 auto;
    position:relative;
    width:100%;
    font-size:12px;
    background-color:#edf1f7;
}

table td, table th {
    border: 1px solid black;
    height:30px;
}

回答4:

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

回答5:

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