表格行，你可以設置高度爲零？

你可以設置表格行高度爲0嗎？ IE 8，Chrome，Firefox，Opera。表格行，你可以設置高度爲零？

爲什麼，你問！那麼，我有一個行，這是一個用戶點擊父行時動態構建和顯示。麻煩的是，如果沒有行，單擊時它仍然顯示一個空的1像素高行。

這是孩子的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>

來源

2009-07-22 flavour404

我不認爲0行高度技巧完美的作品，無論如何 - 使用Firefox和IE，它會在桌面上形成一個更胖的邊框。如果你關閉邊框，這對你來說可能無關緊要（儘管我認爲你仍然會在表格頂部留出一個空白的1像素行）。許多網頁設計師在第一行中使用了spacer gif（1x1透明gif，大小適當的寬度）以獲得解決這兩個問題的相同效果。

來源

2009-07-22 20:13:35 Maksim

您可以隱藏通過顯示的行：無，如果你想要的，但我認爲瀏覽器將總是給箱1px的

來源

2009-07-22 20:14:04

這是事實，如果你不將顯示器設置爲無，對其進行訪問後，難！ – flavour404 2009-07-22 23:41:41

有沒有避免的。如果您需要顯示/隱藏單元格內容，則必須冗餘地對父行進行同樣的操作。否則，最終會出現細小的空行。 – dmvianna 2015-03-30 06:37:57

-1

最小高度一個很好的起點將設置溢：對隱藏風格爲<td>元素。

來源

2009-07-22 20:14:44

這不起作用。 – flavour404 2009-07-22 20:36:36

因爲我必須有50個評論發表評論，我會發表一個答案。

我想你可以用普通的javascript來完成，我已經使用了一個水果的例子。希望你不介意。

點擊This Fiddle看看下面的代碼是幹什麼的。如果這是你想要的。 :)

的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>

和一些CSS使它看起來很漂亮：

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; 
}

來源

2016-12-15 10:52:20 FllnAngl

表格行，你可以設置高度爲零？

回答

相關問題