Table avec <tr>/<tbody> hidden

Invité · 09/04/2014, 21h46

Bonsoir,

J'ai un souci de mise en page sur un tableau un peu spécial, voici le topo :

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
<table>
 <tbody>
  <tr>
   <td>...</td>
   <td>...</td>
  </tr>
  <tr class="hidden">
   <td>...</td>
   <td>...</td>
  </tr>
  <tr>
   <td>...</td>
   <td>...</td>
  </tr>
 </tbody>
 <tbody class="hidden">
  <tr>
   <td>...</td>
   <td>...</td>
  </tr>
  <tr class="hidden">
   <td>...</td>
   <td>...</td>
  </tr>
  <tr>
   <td>...</td>
   <td>...</td>
  </tr>
 </tbody>

Voilà en gros à quoi le squelette de mon tableau ressemble.
Avec tout ça j'ai un script qui affiche/cache chaque élément invisible séparément (avec les ID) sous l'action d'un trigger.
Le souci que j'ai est l'affichage des parties normalement cachées, elles s'affichent selon la largeur de la première colonne du tableau et non pas selon la largeur du tableau en lui même.
Voici quelques screens pour expliquer plus clairement :
Affichage normal, sans aucun trigger déclenché : Nom : default_print.png
Affichages : 1020
Taille : 33,6 Ko

Nom : default_print.png
Affichages : 1020
Taille : 33,6 Ko

Avec un trigger de <tr> déclenché : Nom : default_print_trigger1.png
Affichages : 961
Taille : 34,6 Ko

Avec le trigger du <tbody> déclenché en plus : Nom : default_print_trigger2.png
Affichages : 973
Taille : 37,0 Ko

Ce que je cherche, c'est étendre la largeur des éléments sous trigger à l'ensemble du tableau, pas uniquement à la première colonne :/

Merci d'avance !

**Muchos** · 10/04/2014, 01h11

Bonjour,

On ne peut pas mettre des données de natures différentes dans une même colonne. ~~On ne peut pas non plus mettre 2 TBODY.~~ Pour étendre une cellule sur plusieurs colonnes, on utilise COLSPAN.

Avec le tableau, j'imagine deux solutions possibles :

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
39
40
41
42
43
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Tableau à boîtes déroulables</title>
  <style type="text/css">
td {
 border: thin solid black;
}
.details {
 visibility: collapse;
}
.details:target {
 visibility: visible;
}
  </style>
</head>
<body>
 <table>
 <thead>
  <tr>
   <td>Date</td>
   <td>Épisode</td>
   <td>Détails</td>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>J1</td>
   <td><a href="#j1" title="Détails sur foo">foo</a></td>
   <td class="details" id="j1">Saison 5</td>
  </tr>
  <tr>
   <td>J2</td>
   <td colspan="2">
    <a href="#j2" title="Détails sur bar">bar</a>
    <span class="details" id="j2">(saison 5)</span>
   </td>
  </tr>
 </tbody>
 </table>
</body>
</html>

J'ai aussi songé à une solution avec une liste de définition :

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
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Liste de définitions déroulables</title>
  <style type="text/css">
.details {
 visibility: collapse;
}
.details:target {
 visibility: visible;
}
  </style>
<body>
<dl>
 <dt>J1</dt>
 <dd><a href="#j1" title="Détails sur foo">foo</a></dd>
 <dd class="details" id="j1">super épisode !</dd>
 
 <dt>J2</dt>
 <dd><a href="#j2" title="Détails sur bar">bar</a></dd>
 <dd class="details" id="j2">naze...</dd>
</dl>
</body>
</html>

Invité · 10/04/2014, 01h38

Je ne comprends pas vraiment ta réponse ...
De quelles natures parles-tu au niveau des colonnes?

De plus on peut parfaitement utiliser plusieurs TBODY dans une seule TABLE, c'est assez courant et ça permet de regrouper plusieurs éléments dans un même tableau.
En l'occurrence j'en ai besoin pour faire apparaitre/cacher toute une partie de mon tableau.
(Et même le DTD confirme l'utilisation de plusieurs TBODY :

Code :

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

1
2
<!ELEMENT table
     (caption?, (col*|colgroup*), thead?, tfoot?, (tbody+|tr+))>

Et je pense que tu n'as pas bien compris mon souci pour étendre sur tout le tableau :
Les TR que je hide/unhide contiennent elles aussi 2 TD, comme le reste du tableau, il faudrait donc que ces 2 TD s'alignent avec les autres, et non pas qu'elles rentrent dans l'espace du premier TD des autres TR.

Pour les exemples que tu m'as proposé, c'est impossible pour moi : Je ne dois rien faire apparaitre dans l'URL.
Je fais un appel pour authentifier une session sur un serveur avant de charger cette page, je dois absolument la garder clean.

**Muchos** · 10/04/2014, 08h02

J'ai corrigé mon message à propos de TBODY. Désolé

Je ne dois rien faire apparaitre dans l'URL.

Alors peut-être gérer le montrer/masquer en JS ?

Et je pense que tu n'as pas bien compris mon souci pour étendre sur tout le tableau

Ce que je comprends (d'après les images), c'est qu'une TR "a" peut être cliquée pour faire apparaître sous elle une TR "a bis", contenant des données complémentaires.
Si c'est le cas, ça casse la structure de la table — où chaque colonne doit servir à un seul type de données (colonnes "épisode", "titre", etc.)

Invité · 10/04/2014, 10h20

Si le problème venait effectivement de plusieurs types de données dans une seule colonne, pourquoi mon 2e trigger ne fonctionne pas correctement?

Il ajoute exactement les mêmes types de données, en dessous des précédentes.

**NoSmoking** · 10/04/2014, 18h26

Bonjour,
Aucune raison si le HTML initial et résultant est bien construit, vérifie la structure de ta table après action de masquage.

Invité · 12/04/2014, 01h37

Pourtant le HTML est correct ...

Voilà ce que ça donne en fin de traitement : Nom : html_got.png
Affichages : 1007
Taille : 118,2 Ko

On voit bien que la syntaxe est bonne ..

**Muchos** · 12/04/2014, 06h18

Envoyé par Zenoo0

On voit bien que la syntaxe est bonne ..

On n'a pas tout le code du tableau, là…
Il faudrait faire un test avec un simple élément cacher/montrer dans un petit tableau, juste pour isoler le problème.

**NoSmoking** · 12/04/2014, 10h28

Envoyé par Zenoo0

On voit bien que la syntaxe est bonne ..

là je dois admettre que je suis bluffé, pas l'once d'une erreur dans ce que l'on ne voit pas

Invité · 12/04/2014, 11h46

Bon, j'ai refait un test avec une syntaxe aussi simple que possible :

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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
	<head>
		<title>Watch'Hordes</title>
		<link rel="icon" href="favicon.ico" />
		<STYLE type="text/css">
			.hidden { 
				display: none;
			}
			.unhidden { 
				display: block;
			}
 
			A:link {text-decoration: none; color: #808080}
			A:visited {text-decoration: none; color: #808080}
			A:active {text-decoration: none; color: #808080}
			A:hover {text-decoration: none; color: #808080}
 
			@font-face {
				font-family: 'visitor';
				src: url('resources/fonts/visitor1-webfont.eot');
				src: url('resources/fonts/visitor1-webfont.eot?#iefix') format('embedded-opentype'),
					 url('resources/fonts/visitor1-webfont.woff') format('woff'),
					 url('resources/fonts/visitor1-webfont.ttf') format('truetype'),
					 url('resources/fonts/visitor1-webfont.svg#visitor_tt1_brkregular') format('svg');
				font-weight: normal;
				font-style: normal;
			}
 
			body{ 
				background-image:url('resources/background.png');
				font-family: 'visitor';
				color:#f0d79e;
				font-size: 20px;
			}
 
		</STYLE>
		<script type="text/javascript">
                          function unhide(divID) {
                                var item = document.getElementById(divID);
                                if (item) {
                                  item.className=(item.className=='hidden')?'unhidden':'hidden';
                                }
                          }
                </script>
	</head>
	<body>
		<a href="javascript:unhide('test2');">Test2</a><br /><br />
		<table border>
			<tbody>
				<tr>
					<td>
					Test
					</td>
					<td>
					<a href="javascript:unhide('test1');">Test1</a>
					</td>
				</tr>
				<tr id="test1" class="hidden">
					<td>
					Test
					</td>
					<td>
					Test
					</td>
				</tr>
			</tbody>
			<tbody id="test2" class="hidden">
				<tr>
					<td>
					Test
					</td>
					<td>
					<a href="javascript:unhide('test3');">Test3</a>
					</td>
				</tr>
				<tr id="test3" class="hidden">
					<td>
					Test
					</td>
					<td>
					Test
					</td>
				</tr>
			</tbody>
		</table>
 
	</body>
</html>

Vous pouvez voir les résultats ici.
Là je ne suis pas fou, il n'y a aucun souci dans le HTML rendu ><

**NoSmoking** · 12/04/2014, 12h36

enfin le code

donc en fait pas de problème de structure mais un problème ce CSS.

Affecter un display:block à des éléments qui ne le sont pas engendre des soucis de présentation, la preuve.

- Les TR sont en display:table-row.
- Les TBODY sont en display:table-row-group.

Donc ta fonction javascript pour afficher/masquer les éléments devrait en tenir compte.

Invité · 12/04/2014, 14h35

Mais ... J'ai un autre moyen pour éviter ça?

Je ne veux pas passer par du visibility, donc ... Je ne vois pas trop :/

EDIT : Aaaah non attendez, je viens de comprendre, il faut juste que je change le display: block en fonction de ce que j'affiche.
Je fais ça tout de suite.

EDIT 2: Tout fonctionne, merci beaucoup !

Table avec <tr>/<tbody> hidden

HTML

Discussions similaires

Partager

Partager