TABLA más ancha que la DIV

En el ejemplo siguiente, también disponible here, tanto WebKit (Safari 5, Chrome 10.0.648.205) como Mozilla (FF 4) mantienen DIV div alrededor del ancho visible de la ventana del navegador, mientras que TABLE es tan amplio como su contenido.TABLA más ancha que la DIV

Esperaría que el DIV crezca tan ancho como el TABLE, pero como el comportamiento es constante en todos los navegadores, sospecho que es una característica en lugar de un error.

Curiosamente, si el DIV está configurado para tener flotante: izquierda, it does grow as wide as the table.

¿Alguna explicación?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
<html> 
<head> 
<title>Wide Table</title> 
<style> 

#container { 
    background-color:blue; 
/* float:left;*/ 
} 

</style> 
</head> 
<body> 
    <div id="container"> 
    <table > 
     <tr id="tr"> 
     <td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td> 
     </tr> 
    </table> 
    </div> 
</body> 
</html>

Fuente

2011-04-20 Youval Bronicki

Tu pregunta ha respondido a mi pregunta! El "crecimiento" flotante es lo que estaba buscando. Configurar la pantalla en el bloque en línea también funciona, y es en lo que finalmente me decidí. – Chris

Los elementos del bloque toman el ancho de su elemento primario de forma predeterminada, no el ancho de su contenido; altura, por otro lado, funciona al revés: los elementos de bloque toman la altura de su contenido por defecto en lugar de la altura de su elemento primario. Las cosas funcionan de esta manera porque HTML/CSS se basa en el diseño habitual de arriba a abajo del texto en inglés.

lo tanto, su #container toma el ancho de <body> y luego los <table> dentro #container se desborda fuera #container. Si coloca overflow: hidden en #container, recortará el <table>, overflow-x: auto; en #container y agregará una barra de desplazamiento.

ACTUALIZACIÓN: En lo que se refiere a los elementos flotantes, la CSS3 spec tiene esto que decir:

El valor usado de 'width' es el valor calculado, salvo si son 'auto', cuando se usa valor es el ancho de contracción ajustada.

La anchura predeterminada será auto tan shrink-to-fit que es:

Cálculo de la encoger-a-ajuste anchura es similar al cálculo de la anchura de una celda de la tabla usando el algoritmo de diseño de tabla automática . Aproximadamente: calcule el ancho preferido formateando el contenido sin romper líneas a no ser que ocurra un salto de línea explícito, y también calcule el ancho mínimo preferido, por ejemplo, probando todos los posibles saltos de línea.

No hay posibles saltos de línea en su <table> por lo que el #container flotado se enfrentará a todo lo ancho de su <table> niño.

Fuente

2011-04-20 19:53:57

Y flotar, como el bloque en línea y la celda de tabla, usa un algoritmo ["reducir para ajustar"] (http://www.w3.org/TR/CSS21/visudet.html#float-width) que mira el contenido para calcular el ancho del contenedor –

@Youval: Parece que llegó al estándar antes de mi actualización. Agregué algunos enlaces al borrador de trabajo de CSS3 para la posteridad. –

-3

En general, establezco el tamaño del div y dejo que la tabla se ajuste a la div. No estoy seguro de si ese poco de conocimiento ayudará o no.

Fuente

2011-04-20 19:42:57 Brett

Respuesta

Cuestiones relacionadas