[CSS] div et de table imbriquées

**Gwipi** · 17/11/2005, 01h50

Bonjour,

Je suis confronté à un problème sur IE et je suis surpris d'être le seul puisque je n'ai trouvé aucun sujet sur ce problème. Ou alors je dois être vraiment idiot.

J'ai une div avec un width=100% et un padding=5px et dedans une table avec un width=100%.
Le problème est que cela fait debordé la div et me crée un scrolling en bas de page pour effectuer un défilement sur la droite.
(Je dois garder le padding=5px pour mon design)

Comment eviter ce debordement sur la droite ?

Merci pour votre aide

**ozzmax** · 17/11/2005, 02h38

Ouais c'est vrai que c'est pas trop intéressant un scroll vers la droite...
Est ce que tu peux fixer ton width en pixel par rapport à la largeur de ton écran?

Je me demandais comment était ton code car sa semble correct pour moi?

**Gwipi** · 17/11/2005, 06h27

Voici mon code simplifié :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
CSS
div { width:100%; padding:10px; }
table { width:100%; }
 
HTML
<div><table><tr><td>contenu</td></tr></table></div>

J'ai testé en enlevant le padding:10px et en mettant padding:0px à la place et il n'y a plus de débordement mais il me faut ce padding.

Merci pour votre aide

**francis m** · 17/11/2005, 11h16

ben oui mais ta table faisant 100% + un padding de 10px, cela fait plus de 100%...
essaie avec width:auto;ou padding:1%;

**Gwipi** · 17/11/2005, 13h20

Bon alors j'ai essayé :

1. avec un padding de 1% et un width de 100% = debordement
2. avec un width:auto le tableau prend la largeur minimum alors que je souhaiterais la largeur maximum.

Je cherche encore, mais je suis encore preneur de votre aide

**ozzmax** · 17/11/2005, 16h07

Si tu ne set pas le width du div... sa fonctionne non?

**Gwipi** · 19/11/2005, 08h52

Non toujours pas, vraiment vbizarre ce problème, j'ai toujours pas trouvé la solution.

**francis m** · 19/11/2005, 14h26

bizarre ton truc : j'ai fait comme suit et cela fonctionne correctement
html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<div class="total"><table class="tablo2"><tr><td>contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu</td></tr></table></div>

css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
.total { width:100%; padding:10px; background-color:red;} 
.tablo2 { width:100%; background-color:green;}

**Gwipi** · 19/11/2005, 15h47

Je viens de tester ton exemple avec IE 6.0 et j'ai le même problème, cela crée un scrolling vers la droite.

C'est quoi le truc parce que la je vois vraiment pas ?

**francis m** · 19/11/2005, 16h09

je ne sais pas quel est le truc... chez moi cela fonctionne correctement sous ie 6.0

tu n'aurais pas un nowrap quelque part ?

**Gwipi** · 19/11/2005, 16h25

J'ai testé ton exemple sur une page html avec uniquement ton code et ca fait pareil.

**francis m** · 19/11/2005, 23h46

je viens de faire pareil et chez moi, le contenu passe à la ligne suivante quand nécessaire, et je n'ai pas de scroll horizontal

donc la je ne comprends pas du tout

peux-tu me monter l'intégralité de ta page test spécifique (celle que tu viens de créer), ainsi qu'une copie d'écran de ce que cela donne ?
soit ici soit par mail, comme tu veux

**Gwipi** · 20/11/2005, 06h51

Ca y est je viens de trouver d'où vient le problème :

C'est à cause de cette ligne en début de page :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

En la retirant ça fonctionne correctement.
Je ne pensais pas que cela influencait la mise en page.

Encore merci pour votre aide bien précieuse.

**Gwipi** · 20/11/2005, 07h12

Eh bon et bien maintenant c'est avec FireFox que ça déborde ...

**Gwipi** · 21/11/2005, 06h09

Oups désolé

Voic le code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<style type="text/css">
<!--
.total { width:100%; padding:10px; background-color:red;} 
.tablo2 { width:100%; background-color:green;} 
-->
</style>
<body> 
<div class="total"> 
	<table class="tablo2"> 
		<tr> 
			<td>contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu</td> 
		</tr> 
	</table> 
</div> 
</body>
</html>

Quand à l'affichage, ca donne pareil que sous IE mais avec un leger décalage sur la droite ce qui provoque un scrolling horizontale, cependant il y a bien un retour à la ligne du contenu.

**denisC** · 21/11/2005, 13h06

cf http://www.developpez.net/forums/viewtopic.php?t=419482

**Gwipi** · 21/11/2005, 14h06

Bon et bien merci c'est enfin résolu, j'ai mis tout mon code dans une DIV et je n'ai plus ce debordement, c'est dommage ca alourdi un peu le code pour rien mais bon.

Merci encore à tous pour votre aide

[CSS] div et de table imbriquées

Tableau en CSS

Discussions similaires

Partager

Partager