表格行，你可以设置高度为零？ [英] Table Row, can you set the height to zero?

问题描述

你可以设置表格行高度为0吗？ IE 8，Chrome，Firefox，Opera。

为什么，你问！那么，我有一个行，这是一个用户点击父行时动态构建和显示。麻烦的是，如果没有行，单击时，它仍然显示一个空的1像素高行。

这是子gridview：

 < asp：TemplateField HeaderStyle-CssClass =hidden-columnItemStyle-CssClass =hidden-columnFooterStyle-CssClass =hidden-column > 
< ItemTemplate> 
< tr> 
< td colspan =8> 
< div id ='<％＃Eval（PublicationID）％>'style =display：none; position：relative;> 
< asp：GridView ID =GridView2_ABPubsrunat =serverAutoGenerateColumns =falseWidth =100％
 DataKeyNames =PublicationIDFont-Names =VerdanaFont-Size = 小 > 
<列> 
< asp：TemplateField> 
< ItemTemplate> 
< asp：CheckBox ID =ChildPublicationSelectorrunat =server/> 
< / ItemTemplate> 
< / asp：TemplateField> 
< asp：BoundField DataField =NameAbbrevHeaderText =Publication NameSortExpression =NameAbbrev/> 
< /列> 
< / asp：GridView> 
< / div> 
< / td> 
< / tr> 
< / ItemTemplate> 
< / asp：TemplateField> 
  

CSS：

  .hidden-column 
 {
 display：none; 
 
  

JavaScript：

 < script language =JavaScripttype =text / javascript> 
 var nowOpenedDiv =; 
 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> 
  

解决方案

我不认为0行高无论如何，绝妙的技巧是完美的 - 使用Firefox和IE，它会在桌面顶部形成一个更胖的边框。如果你关闭边框，这对你来说可能无关紧要（尽管我认为你仍然会在表格顶部留出一个空白的1像素行）。许多网页设计师在第一行中使用了spacer gif（1x1透明gif，大小适当的宽度）以获得解决这两个问题的相同效果。

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>

解决方案

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.

这篇关于表格行，你可以设置高度为零？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！