28172 sujets

CSS et mise en forme, CSS3

[Résolu] Taille div s'adaptant à l'élément tableau

Bonjour,

j'ai un div avec un cadre contenant un tableau mais lorsque le tableau dépasse la taille de l'écran, le cadre du div n'entoure plus le tableau comme attendu. C'est ce qui arrive par exemple avec le code suivant en résolution 1024 :


<html>
<head><title>Tab-div</title></head>
	<body>
		<div style="border:1px solid red;padding:10px;">
			<table style="border:3px solid blue;">
				<tr>
					<td style="border:1px solid green;padding:2px;">111111111111111111111111</td>
					<td style="border:1px solid green;padding:2px;">222222222222222222222222</td>
					<td style="border:1px solid green;padding:2px;">333333333333333333333333</td>
					<td style="border:1px solid green;padding:2px;">444444444444444444444444</td>
				</tr>
			</table>
		</div>
	</body>
<html>


Je pense que dans ce cas là, c'est une bonne pratique de fixer les largeurs du tableau et du div mais avant de faire cela, j'aimerais savoir s'il n'y a pas un moyen pour contourner ce problème sans avoir à toucher aux dimensions des éléments.

Merci d'avance pour vos réponses.
Modifié par jreeman (08 Nov 2009 - 18:37)
Salut,

Pour qu'il y ait une solution à ton problème, encore faut-il qu'il y ait un problème clairement exposé, ce qui n'est pas le cas de ton sujet. Il serait en effet bon que tu mettes toutes les chances de ton côté pour que nous comprenions ton problème, et que nous puissions t'y apporter une ou plusieurs solutions.

Dans l'ordre de priorité, tu peux nous fournir :
1. un descriptif très précis de ton problème, impératif pour focaliser notre recherche dans le bons sens.
2. un lien vers une page en ligne, qui permet de constater ce problème par nous même, ne nécessitant parfois pas d'autres informations.
3. l'intégralité du code html et css produit dans le navigateur (et pas seulement des extraits, car le problème se situe parfois ailleurs dans le code).
4. des schémas ou captures d'écran.

La rapidité d'obtention de la réponse dépendra de la qualité les informations que tu nous fourniras.

Bonne chance à toi. Smiley cligne
Mon "problème" n'est pas relatif à un site en particulier, il se produit même quand il n'y a aucun style appliqué au HTML.

Sur cette impression d'écran (correspondant au code HTML posté), sur la droite, le div (bordure rouge) coupe le tableau (bordure bleue).

upload/8671-tab-div.png

Or je voudrais qu'il entoure tout le tableau.
Modifié par jreeman (06 Nov 2009 - 19:20)
En jouant sur le display du conteneur du tableau en le mettant à display:table ou display:inline-block, le div adapte bien sa largeur à celle du tableau (testé sur firefox). Mais le problème c'est que cette propriété et ses valeurs ne sont pas faites pour cela... mais le principal c'est que ca marche...
oui , ces valeur sont faite pour ça :
En particulier :
display:table et CIE , pour se comporter comme un tableau .

display:inline-block et inline => s'adapte a leur contenu sans occupper par defaut 100% de la largeur de l'espace dispos ou herité (en l'occurance ta page a un html sur 100% de la largeur de la fenetre de ton navigateur , donc imposé a body et ses enfant direct de type block.


Le display n'est pas implementé de la même façon dans les navigateur , donc pas vraiment fiable ni pertinent (inline pour englobé des table ou boites n'est pas des plus logique non plu ) , par contre un float ça passe bien en principe.

GC
Modifié par gc-nomade (08 Nov 2009 - 18:06)
Ok merci (cependant le display:table est une solution correcte mais pas encore supporté par ie seulement), je passe en résolu.
Modifié par jreeman (08 Nov 2009 - 20:02)
Sujet clos
Aller à