Tengo un diseño similar a:
<div>
<table>
</table>
</div>
Me gustaría que el div
sólo se expandiera hasta el ancho que alcanza mi table
.
Quieres un elemento de bloque que tenga lo que CSS llama "shrink-to-fit width" y la especificación no proporciona una manera bendita de obtener tal cosa. En CSS2, la contracción para ajustarse no es un objetivo, sino un medio para lidiar con una situación en la que el navegador "tiene que" obtener un ancho de la nada. Esas situaciones son:
cuando no se especifica la anchura. He oído que piensan añadir lo que quieres en CSS3. Por ahora, confórmate con uno de los anteriores.
La decisión de no exponer la función directamente puede parecer extraña, pero hay una buena razón. Es caro. Encoger para ajustar significa formatear al menos dos veces: no se puede empezar a formatear un elemento hasta que se sepa su anchura, y no se puede calcular la anchura sin pasar por todo el contenido. Además, uno no necesita el elemento shrink-to-fit tan a menudo como uno puede pensar. ¿Por qué necesitas un div adicional alrededor de tu tabla? Tal vez el título de la tabla es todo lo que necesitas.
Sin saber en qué contexto aparecerá esto, pero creo que la propiedad de estilo CSS float
ya sea left
o right
tendrá este efecto. Por otro lado, también tendrá otros efectos secundarios, como permitir que el texto flote a su alrededor.
Por favor, corrígeme si me equivoco, no estoy 100% seguro, y actualmente no puedo probarlo yo mismo.
Una solución compatible con CSS2 es utilizar:
.my-div
{
min-width: 100px;
}
También puedes hacer flotar tu div, lo que lo forzará a ser lo más pequeño posible, pero tendrás que usar un clearfix si algo dentro de tu div es flotante:
.my-div
{
float: left;
}