Rendre la largeur du Div égale au contenu de l'enfant

Question

J'ai une disposition similaire :

<div>
    <table>
    </table>
</div>

Je voudrais que le div de ne s'étendre que jusqu'à la largeur de mon table devient.

Answer 1

La solution est de le fixer à display: inline-block .

Answer 2

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 :

• float
• élément positionné de manière absolue
• élément inline-block
• élément de table

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.

Answer 3

Je pense qu'utiliser

display: inline-block;

fonctionnerait, mais je ne suis pas sûr de la compatibilité du navigateur.

---

Une autre solution serait d'envelopper votre div dans un autre div (si vous voulez conserver le comportement du bloc) :

HTML :

<div>
    <div class="yourdiv">
        content
    </div>
</div>

CSS :

.yourdiv
{
    display: inline;
}

Answer 4

display: inline-block ajoute une marge supplémentaire à votre élément.

Je le recommande :

#element {
    display: table; /* IE8+ and all other modern browsers */
}

Answer 5

display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;

Foo Hack - Prise en charge de la stylisation inline-block par plusieurs navigateurs (2007-11-19) .