Hàng Bảng, bạn có thể đặt chiều cao bằng không?

Question

Bạn có thể đặt chiều cao hàng của bảng thành 0 không? IE 8, Chrome, Firefox, Opera.

Tại sao, bạn hỏi! Vâng, tôi có một hàng được tạo động và hiển thị khi người dùng nhấp vào hàng gốc. Vấn đề là nếu không có hàng, khi được nhấp, nó vẫn hiển thị một hàng cao 1 pixel trống.

Đây là GridView con:

<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

Tôi không nghĩ rằng các trick 0-hàng-chiều cao hoạt động hoàn hảo, dù sao - với Firefox và IE, nó tạo ra một đường viền mờ hơn ở phía trên cùng của bảng. Điều này có thể không quan trọng với bạn nếu bạn tắt đường viền (mặc dù tôi nghĩ bạn vẫn nhận được hàng trống 1 pixel ở đầu bảng). Nhiều nhà thiết kế web sử dụng gif spacer (gif trong suốt 1x1, có kích thước tới chiều rộng thích hợp) trong hàng đầu tiên của chúng để có cùng hiệu ứng giải quyết cả hai vấn đề.

Answer 2

Bạn có thể ẩn liên tiếp qua display: none nếu bạn muốn, nhưng tôi cho rằng trình duyệt sẽ luôn luôn cung cấp cho hộp một chiều cao tối thiểu là 1px

Answer 3

Một điểm khởi đầu tốt sẽ được thiết lập overflow: hidden trên phong cách cho các yếu tố <td>.

Answer 4

vì tôi phải có 50 đại diện để nhận xét, tôi sẽ đăng câu trả lời.

Tôi nghĩ rằng những gì bạn muốn có thể được thực hiện với javascript đơn giản, Tôi đã sử dụng một ví dụ về trái cây. hy vọng bạn không nhớ.

Nhấp vào This Fiddle để xem mã bên dưới làm gì. Và nếu đó là những gì bạn muốn. :)

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> 

và một số CSS để làm cho nó trông khá:

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