height dans une table

**yvesall** · 12/07/2007, 16h36

salut je fais un petit truc en XHTML avec une table mais a ma grande surprise !DOCTYPE me modifie mon tableau pas comme je le souhaiterais
je sais tout le monde va me sauter dessus en criant d'utiliser un div, mais la je dois utiliser une table pour ce que je veux faire, mon code c est ca :

Code html :

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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<style type="text/css" media="screen">@import "mafeuille.css";</style>
<table class="main">
	<tbody>
		<tr><td class="main">
			<table class="sec">
				<tbody>
					<tr><td>
						<img src=pouet.bmp>
					</td></tr>
					<tr><td>
						<p>ATTAQUE DE KIKOU LOL</p>
					</td></tr>
					<tr><td style="sec">
						<p>re bablalba</p>
						<p>blabla</p>
					</td></tr>
				</tbody>
			</table>
		</td><td class="main">
			<table class="sec">
				<tbody>
					<tr><td>
						<img src=pouet.bmp>
					</td></tr>
					<tr><td>
						<p>ATTAQUE DE KIKOU LOL</p>
					</td></tr>
					<tr><td style="sec">
						<p>re bablalba</p>
					</td></tr>
				</tbody>
			</table>
		</td></tr>
	</tbody>
</table>

avec

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
22
23
24
25
26
.main {
	width: 700px;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid #000000;
	background: #ff0000;
	padding: 0;
}
 
.sec {
	width:100%;
	height:100%;
	border:1px solid #0000ff;
	background:#00ff00;
	padding:0;
}
 
td{
	vertical-align: top;
 
}
 
.sec{
	height: 100%;
}

si vous lancer ce code vous verez que la cellule de droite ne prend pas 100% de la hauteur que l'on lui attribut, je ne sais pas pourquoi DOCTYPE me fait ca, pourriez vous m'aider

**Bisûnûrs** · 13/07/2007, 09h31

Oulah ..

Comment se fait-il que tu n'aies pas de balise <head> et <body> ?
Tu vas vraiment laisser des images BMP sur un site ..?
Une recherche rapide sur le forum t'aurait donné la réponse : pour qu'un élément ait une hauteur en pourcentage il faut que son élément parent ait une hauteur définie, sachant que l'élement le plus haut dans la hierarchie est l'élément html.

**yvesall** · 13/07/2007, 09h59

lol non je suis pas un fou les BMP c'est pour les testes en offline, ensuite j'ai pas mis les balise head et body parce que la ca n'influe pas sur le comportement de cette page a l'heure actuelle mais je les mettrais lors de l'edition

ensuite j'ai vu de tout partout en effet qu'il fallait que le parent soit definie donc :

Code :

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

1
2
3
html {
	height: 100%;
}

mais mais ca ne change rien de rien :/ donc je suis septiquement PERDUUUUUUU :'(

**Bisûnûrs** · 13/07/2007, 10h07

Code :

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

1
2
3
html, body, .main{
   height:100%;
}

**yvesall** · 13/07/2007, 10h15

ouai en effet juste en rajoutant body ca marche mais je ne saisis pas pourquoi :/ mais merci pour cette precision : ))))))

**Bisûnûrs** · 13/07/2007, 10h19

Parce ton tableau main a pour élément parent body et non html.

html est l'élément parent de body.

Donc il faut que l'élément parent de main (=> body) ait une hauteur définie, et si tu la définie en pourcentage aussi, il faut que l'élément parent de body (=> html) ait une hateur définie aussi.

height dans une table

Tableau en CSS

Vue hybride

Discussions similaires

Partager

Partager