Pantalla CSS: la fila de la tabla no se expande cuando el ancho está establecido en 100%

Estoy teniendo un pequeño problema. Estoy usando Firefox 3.6 y tienen la siguiente estructura DOM:Pantalla CSS: la fila de la tabla no se expande cuando el ancho está establecido en 100%

<div class="view-row"> 
    <div class="view-type">Type</div> 
    <div class="view-name">Name</div>     
</div>

Y el siguiente CSS:

.view-row { 
width:100%; 
display:table-row; 
} 

.view-name { 
display: table-cell; 
float:right; 
} 

.view-type { 
display: table-cell; 
}

Si me quito la display:table-row que se mostrará correctamente, con el view-row mostrando una anchura de 100% Si lo devuelvo, se encoge. He puesto esto en JS Bin:

http://jsbin.com/ifiyo

¿Qué está pasando?

Fuente

2010-08-13 chum of chance

Si está utilizando display:table-row etc., necesita el marcado adecuado, que incluye una tabla que contiene. Sin ella su pregunta original, básicamente, proporciona el mal marcado equivalente de:

<tr style="width:100%"> 
    <td>Type</td> 
    <td style="float:right">Name</td> 
</tr>

¿Dónde está la mesa en el anterior? No se puede simplemente tener una fila de la nada (tr debe estar contenido en cualquiera table, thead, tbody, etc.)

lugar, agregue un elemento exterior con display:table, poner el 100% de ancho en el elemento contenedor. Las dos celdas internas irán automáticamente a 50/50 y alineará el texto en la segunda celda. Olvídese de floats con elementos de tabla. Causará tantos dolores de cabeza.

marcado:

<div class="view-table"> 
    <div class="view-row"> 
     <div class="view-type">Type</div> 
     <div class="view-name">Name</div>     
    </div> 
</div>

CSS:

.view-table 
{ 
    display:table; 
    width:100%; 
} 
.view-row, 
{ 
    display:table-row; 
} 
.view-row > div 
{ 
    display: table-cell; 
} 
.view-name 
{ 
    text-align:right; 
}

Fuente

2010-08-13 19:55:24

+5 en deshacerse de las malditas carrozas! –

Me parece que podría salirse con la omisión de 'display: table-row;' si el marcado solo tiene una fila; el 'display: table-cell;' parece inferir una fila que contiene. Sin embargo, si desea la apariencia de otra o varias filas, entonces necesita el 'display: table-row;': http://jsbin.com/ifiyo/9 – DanDan

+29

-1 porque la explicación es incorrecta. De acuerdo con las especificaciones [CSS2.1] (http://www.w3.org/TR/CSS2/tables.html#anonymous-boxes), se supone que el marcado/CSS en cuestión funciona. – user123444555621

dan en .view-type clase float:left; o eliminar la float:right; de .view-name

edición: Envuelva su div <div class="view-row"> con otro div por ejemplo <div class="table">

y establezca el siguiente CSS:

.table { 
    display:table; 
    width:100%;}

Debe usar la estructura de la tabla para obtener resultados correctos.

Fuente

2010-08-13 19:36:38 Sotiris

intentado eso, no funcionó. –

He probado con ff3.6, es decir, 8, cromo, ópera. Puedes verlo aquí http://jsbin.com/ifiyo/4. Los muestran uno al lado del otro. – Sotiris

Estaba buscando el nombre en el extremo derecho, escribe en el extremo izquierdo ... si haces una pantalla: en línea en ambos y sacar la pantalla: table-row funciona, estaba pensando que podría haber una mejor manera de hacerlo usando las propiedades de la tabla-fila/celda. –

Tenga en cuenta que de acuerdo a la especificación CSS3, que no tiene que envolver su diseño en un elemento de estilo de tabla. El navegador deducirá la existencia de elementos que contienen si no existen.

Fuente

2011-09-13 04:27:58

Lo mismo ha sido [especificado en CSS 2.1] (http: //www.w3.org/TR/CSS2/tables.html # anonymous-boxes), sección 17.2.1, parte superior 3.2. El siguiente ejemplo de HBOX/VBOX es exactamente el caso en cuestión. Parece que los navegadores simplemente no les importa. – user123444555621

Puede anidar tabla-celda directamente dentro de la tabla. Tendrás una mesa. Comenzar con la tabla de la fila no funciona. Prueba con este código HTML: Respuesta

<html> 
    <head> 
    <style type="text/css"> 
.table { 
    display: table; 
    width: 100%; 
} 
.tr { 
    display: table-row; 
    width: 100%; 
} 
.td { 
    display: table-cell; 
} 
    </style> 
    </head> 
    <body> 

    <div class="table"> 
     <div class="tr"> 
     <div class="td"> 
      X 
     </div> 
     <div class="td"> 
      X 
     </div> 
     <div class="td"> 
      X 
     </div> 
     </div> 
    </div> 

     <div class="tr"> 
     <div class="td"> 
      X 
     </div> 
     <div class="td"> 
      X 
     </div> 
     <div class="td"> 
      X 
     </div> 
     </div> 

    <div class="table"> 
     <div class="td"> 
      X 
     </div> 
     <div class="td"> 
      X 
     </div> 
     <div class="td"> 
      X 
     </div> 
    </div> 

    </body> 
</html>

Fuente

2011-10-31 11:45:24 rakensi

Probado:

En el.Ver fila css, cambie:

display:table-row;

display:table

y deshacerse de "flotar". Todo funcionará como se espera.

Como se ha sugerido en los comentarios, no hay necesidad de una tabla de embalaje. CSS permite omitir los niveles de la estructura de árbol (en este caso, las filas) que están implícitos. La razón por la que su código no funciona es que el "ancho" solo se puede interpretar en el nivel de la tabla, no en el nivel de la tabla de la fila. Cuando tiene una "tabla" y luego una "celda de tabla" directamente debajo, se interpretan implícitamente como sentados en una fila.

Ejemplo de trabajo:

<div class="view"> 
    <div>Type</div> 
    <div>Name</div>     
</div>

con CSS:

.view { 
    width:100%; 
    display:table; 
} 

.view > div { 
    width:50%; 
    display: table-cell; 
}

Fuente

2012-08-16 23:48:16

Su respuesta sugiere el equivalente CSS de '

' que por sí solo sería un marcado HTML no válido según el W3C. Si bien validará, ¿por qué sugeriría decirle al navegador que imite este marcado? –

+16

Esto es correcto según las reglas de CSS: http://www.w3.org/TR/CSS2/tables.html#anonymous-boxes. Es más fácil de mantener eliminando líneas innecesarias de código (por ejemplo, el div innecesario sugerido por KP). Esto me ayudó ... Lo estoy usando. +1 – BillR

¿No sería suficiente deshacerse de las declaraciones flotantes? .view div podría mantener su visualización: propiedad de la tabla de la fila. – Ideogram

Pantalla CSS: la fila de la tabla no se expande cuando el ancho está establecido en 100%

Respuesta

Cuestiones relacionadas