Eu tenho um layout semelhante a:
<div>
<table>
</table>
</div>
Eu gostaria que o div
só se expandisse para a largura que a minha mesa
se tornar.
Você quer um elemento de bloco que tenha o que o CSS chama de shrink-to-fit width e a especificação não fornece uma forma abençoada de obter tal coisa. No CSS2, shrink-to-fit não é um objectivo, mas significa lidar com uma situação em que o browser "tem de" obter uma largura a partir do nada. Essas situações são:
quando não há largura especificada. Ouvi dizer que eles pensam em adicionar o que você quer no CSS3. Por enquanto, contente-se com um dos anteriores.
A decisão de não expor diretamente a característica pode parecer estranha, mas há uma boa razão para isso. É caro. Shrink-to-fit significa formatar pelo menos duas vezes: você não pode começar a formatar um elemento até saber sua largura, e você não pode calcular a largura sem passar por todo o conteúdo. Além disso, não é necessário encolher o elemento com a mesma frequência com que se pensa. Por que você precisa de um mergulho extra ao redor da sua mesa? Talvez a legenda da tabela seja tudo o que você precisa.
Não sabendo em que contexto isso irá aparecer, mas acredito que a propriedade estilo CSS float
ou esquerda
ou direita
terá esse efeito. Por outro lado, ela também terá outros efeitos colaterais, como permitir que o texto flutue ao redor dela.
Por favor, me corrija se eu estiver errado, mas não tenho 100% de certeza, e atualmente não posso testá-lo eu mesmo.
Uma solução compatível com CSS2 é para ser usada:
.my-div
{
min-width: 100px;
}
Você também pode flutuar seu mergulho, o que o forçará a ser o menor possível, mas você precisará usar um clearfix se alguma coisa dentro do seu mergulho estiver flutuando:
.my-div
{
float: left;
}