J'ai une disposition similaire :
<div>
<table>
</table>
</div>
J'aimerais que le div
ne s'étende que jusqu'à la largeur de ma table
.
Vous voulez un élément de bloc qui a ce que CSS appelle une largeur rétrécie jusqu'à l'ajustement et la spécification ne fournit pas un moyen béni d'obtenir une telle chose. En CSS2, le rétrécissement en fonction de la largeur n'est pas un objectif, mais un moyen de faire face à une situation où le navigateur "doit" obtenir une largeur à partir de rien. Ces situations sont les suivantes :
lorsqu'il n'y a pas de largeur spécifiée. J'ai entendu dire qu'ils pensent à ajouter ce que vous voulez en CSS3. Pour l'instant, contentez-vous de l'un des éléments ci-dessus.
La décision de ne pas exposer directement cette fonctionnalité peut sembler étrange, mais il y a une bonne raison. Elle est coûteuse. Réduire pour adapter signifie formater au moins deux fois : vous ne pouvez pas commencer à formater un élément avant de connaître sa largeur, et vous ne pouvez pas calculer la largeur sans passer par tout le contenu. De plus, on n'a pas besoin de l'élément "shrink-to-fit" aussi souvent qu'on le pense. Pourquoi avez-vous besoin d'un div supplémentaire autour de votre tableau ? Peut-être que la légende du tableau est tout ce dont vous avez besoin.
Je ne sais pas dans quel contexte cela apparaîtra, mais je crois que la propriété de style CSS float
soit left
soit right
aura cet effet. D'un autre côté, elle aura aussi d'autres effets secondaires, comme permettre au texte de flotter autour d'elle.
Corrigez-moi si je me trompe, je ne suis pas sûr à 100% et je ne peux pas le tester moi-même.
Une solution compatible avec CSS2 consiste à utiliser :
.my-div
{
min-width: 100px;
}
Vous pouvez également faire flotter votre div, ce qui la rendra aussi petite que possible, mais vous devrez utiliser un [clearfix][1] si un élément de votre div est flottant :
.my-div
{
float: left;
}