Riga tabella, puoi impostare l'altezza a zero?

Question

È possibile impostare un'altezza della riga della tabella su 0? IE 8, Chrome, Firefox, Opera.

Perché, chiedi! Bene, ho una riga che viene creata e visualizzata dinamicamente quando un utente fa clic su una riga padre. Il problema è che se non ci sono righe, quando si fa clic, visualizza ancora una riga vuota di 1 pixel.

Questa è la gridview bambino:

<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

Non credo che il trucco 0-row-altezza funziona perfettamente, in ogni caso - con Firefox e IE crea un bordo più grasso in cima al tavolo. Questo potrebbe non essere importante se disattivi i bordi (anche se penso che tu abbia ancora una riga vuota di 1 pixel nella parte superiore del tavolo). Molti web designer utilizzano spacer gif (una gif trasparente 1x1, con dimensioni della larghezza appropriata) nella prima riga per ottenere lo stesso effetto che risolve entrambi i problemi.

Answer 2

È possibile nascondere una riga tramite display: none se si vuole, ma suppongo che i browser darà sempre scatole di un'altezza minima di 1px

Answer 3

Un buon punto di partenza sarebbe quello di impostare overflow: hidden sulla stile per gli elementi <td>.

Answer 4

poiché devo avere 50 rappresentanti per commentare, posterò una risposta.

Penso che quello che vuoi possa essere fatto con plain javascript, Ho usato un esempio di frutta. spero che non ti dispiaccia.

Fare clic su This Fiddle per vedere cosa fa il codice qui sotto. E se è quello che vuoi. :)

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> 

e alcuni CSS per farlo sembrare abbastanza:

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