Fila de tabla, ¿puede establecer la altura en cero?

Question

¿Puedes establecer una altura de fila de tabla en 0? IE 8, Chrome, Firefox, Opera.

¡Por qué, usted pregunta! Bueno, tengo una fila que se construye dinámicamente y se muestra cuando un usuario hace clic en una fila principal. El problema es que si no hay filas, cuando se hace clic, aún muestra una fila vacía de 1 píxel de alto.

Este es el gridview niño:

<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

No creo que el truco 0 fila altura funciona perfectamente, De todos modos, con Firefox e IE, hace un borde más gordo en la parte superior de la mesa. Puede que esto no le importe si desactiva los bordes (aunque creo que todavía obtiene una fila de 1 píxel en blanco en la parte superior de la tabla). Muchos diseñadores web utilizan gifs espaciadores (un gif transparente de 1x1, con el ancho adecuado) en su primera fila para obtener el mismo efecto que resuelve ambos problemas.

Answer 2

Puede ocultar una fila a través de display: none si lo desea, pero supongo que los navegadores siempre dan cajas de una altura mínima de 1 píxel

Answer 3

Un buen punto de partida sería establecer overflow: hidden en el estilo para los elementos <td>.

Answer 4

ya que debo tener 50 representantes para comentar, voy a publicar una respuesta.

Creo que lo que quiere se puede hacer con javascript simple, He usado un ejemplo de fruta. espero que no te importe

Haga clic en This Fiddle para ver lo que hace el código siguiente. Y si es lo que quieres :)

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> 

y un poco de CSS para que se vea bonito:

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