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 : 1042
Taille : 33,6 Ko

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

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

Avec le trigger du <tbody> déclenché en plus : Nom : default_print_trigger2.png
Affichages : 989
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.