Mise en page de table modifiée suivant (block,inline)

**fabrice91** · 03/04/2009, 10h48

bonjour,
J'ai une table composée de deux colonnes.
Sur la premiere ligne (impaire) premiere colonne j'ai une image cliquable (+), sur la premiere ligne deuxieme colonne j'ai un titre pour cette section.
La deuxieme ligne (paire) premiere colonne est vide et la deuxieme ligne deuxieme colonne contient une table.
Et ceci répété plusieurs fois, par paire donc.
Chaque premiere cellule a un width à 50px et chaque deuxieme cellule a un width a 350px par feuille css.
Sans autre mise en page, le résultat est celui-ci :

Avec WebDevelopper, voici le résultat :

La table est bien symètrique, la premiere colonne a une taille de 50px, la seconde de 350px, nickel...
Si j'ajoute au <tr> de la ligne paire un display = block par une propriété css, je devrais obtenir le même résultat...puisque je dis de montrer ce que l'on voit déjà !
et bien non !

Ma premiere cellule avec l'image (+) ne prend plus la taille de 50px que lui imposait le css !
Et les 2 cellules suivantes sont ramassées sous la première cellule alors qu'elles devraient être les unes en dessous des autres...
Un avis ou une piste rapide à explorer ?
merci.

**fabrice91** · 03/04/2009, 11h28

Bon j'ai enlevé TOUTE la mise en page autre que celle de cette table...
et ça fonctionne...

Gasp, je dois avoir une autre règle ailleurs qui me met le bazar, il va falloir que je trouve laquelle...

**fabrice91** · 03/04/2009, 12h24

Le problème subsiste sans plus aucune mise en page...
Voici le code html à copier coller dans votre Firefox (ah oui, je suis sous Firefox

)

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
 
<html>
<head>
<title>test</title>
</head>
<body>
 
<!-- debut de la table principale -->
<table>
<!-- premiere ligne de la table : premiere cellule 10px de large, deuxieme cellule 350px de large -->
<tr><td width=10px>+</td><td width=350px>titre1</td></tr>
<!-- deuxieme ligne de la table -->
<tr>
<!-- premiere cellule de la deuxieme ligne : contient un espace et largeur 10px -->
<td width=10px>&nbsp;</td>
<!-- deuxieme cellule de la deuxieme ligne -->
<td width=350px>
<!-- ceci est une table qui contient 3 lignes de 2 cellules -->
<table>
<tr>
<td>test1</td>
<td>test2</td>
</tr>
<tr>
<td>test1</td>
<td>test2</td>
</tr>
<tr>
<td>test1</td>
<td>test2</td>
</tr>
</table>
<!-- fin de la deuxieme cellule de la deuxieme ligne -->
</td>
<!-- fin de la deuxime ligne -->
</tr>
 
 
 
<!-- troisieme ligne de la table : premiere cellule 10px de large, deuxieme cellule 350px de large -->
<tr><td width=10px>+</td><td width=350px>titre2</td></tr>
<!-- quatrieme ligne de la table -->
<tr>
<!-- premiere cellule de la deuxieme ligne : contient un espace et largeur 10px -->
<td width=10px>&nbsp;</td>
<!-- deuxieme cellule de la deuxieme ligne -->
<td width=350px>
<!-- ceci est une table qui contient 3 lignes de 2 cellules -->
<table>
<tr>
<td>test3</td>
<td>test4</td>
</tr>
<tr>
<td>test3</td>
<td>test4</td>
</tr>
<tr>
<td>test3</td>
<td>test4</td>
</tr>
</table>
<!-- fin de la deuxieme cellule de la quatrieme ligne -->
</td>
<!-- fin de la quatrieme ligne -->
</tr>
 
</table>
</body>
</html>

C'est le résultat que j'attends...
En modifiant juste ces 2 lignes pour ajouter un display block sur les lignes paires, l'aspect de la table est modifié !!!

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
 
<html>
<head>
<title>test</title>
</head>
<body>
 
<!-- debut de la table principale -->
<table>
<!-- premiere ligne de la table : premiere cellule 10px de large, deuxieme cellule 350px de large -->
<tr><td width=10px>+</td><td width=350px>titre1</td></tr>
<!-- deuxieme ligne de la table -->
<tr style="display:block">
<!-- premiere cellule de la deuxieme ligne : contient un espace et largeur 10px -->
<td width=10px>&nbsp;</td>
<!-- deuxieme cellule de la deuxieme ligne -->
<td width=350px>
<!-- ceci est une table qui contient 3 lignes de 2 cellules -->
<table>
<tr>
<td>test1</td>
<td>test2</td>
</tr>
<tr>
<td>test1</td>
<td>test2</td>
</tr>
<tr>
<td>test1</td>
<td>test2</td>
</tr>
</table>
<!-- fin de la deuxieme cellule de la deuxieme ligne -->
</td>
<!-- fin de la deuxime ligne -->
</tr>
 
 
 
<!-- troisieme ligne de la table : premiere cellule 10px de large, deuxieme cellule 350px de large -->
<tr><td width=10px>+</td><td width=350px>titre2</td></tr>
<!-- quatrieme ligne de la table -->
<tr style="display:block">
<!-- premiere cellule de la deuxieme ligne : contient un espace et largeur 10px -->
<td width=10px>&nbsp;</td>
<!-- deuxieme cellule de la deuxieme ligne -->
<td width=350px>
<!-- ceci est une table qui contient 3 lignes de 2 cellules -->
<table>
<tr>
<td>test3</td>
<td>test4</td>
</tr>
<tr>
<td>test3</td>
<td>test4</td>
</tr>
<tr>
<td>test3</td>
<td>test4</td>
</tr>
</table>
<!-- fin de la deuxieme cellule de la quatrieme ligne -->
</td>
<!-- fin de la quatrieme ligne -->
</tr>
 
</table>
</body>
</html>

Je suis preneur de toutes idées pour obtenir, avec le style display block, le même comportement que l'exemple du dessus, sans le block !!!
Merci.

**fabrice91** · 03/04/2009, 14h43

Bon je continue, un début de réponse ici :
http://www.developpez.net/forums/d61...display-block/

il me faut trouver le moyen maintenant de switcher entre 'none' et '', ce dernier redonnant donc la valeur par défaut...

Mise en page de table modifiée suivant (block,inline)

Tableau en CSS

Discussions similaires

Partager

Partager