hidden

Version imprimable

3 pièce(s) jointe(s)

Bonsoir,

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

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é : Pièce jointe 142558
Avec un trigger de <tr> déclenché : Pièce jointe 142559
Avec le trigger du <tbody> déclenché en plus : Pièce jointe 142560

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 !

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:

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:

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>

10/04/2014, 01h38
Invité
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:

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.
10/04/2014, 08h02
Muchos

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

Citation:

Je ne dois rien faire apparaitre dans l'URL.

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

Citation:

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.)
10/04/2014, 10h20
Invité

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.
10/04/2014, 18h26
NoSmoking

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.
12/04/2014, 01h37
Invité

1 pièce(s) jointe(s)

Pourtant le HTML est correct ...

Voilà ce que ça donne en fin de traitement : Pièce jointe 142742

On voit bien que la syntaxe est bonne ..
12/04/2014, 06h18
Muchos

Citation:

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.
12/04/2014, 10h28
NoSmoking

Citation:

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 :aie:
:pastaper:

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

Code:

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 ><

12/04/2014, 12h36
NoSmoking

:yaisse2: enfin le code :mouarf:

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.
12/04/2014, 14h35
Invité

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 !