IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

HTML Discussion :

Table avec <tr>/<tbody> hidden


Sujet :

HTML

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Invité
    Invité(e)
    Par défaut Table avec <tr>/<tbody> hidden
    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
    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 !
    Dernière modification par Invité ; 09/04/2014 à 21h57.

  2. #2
    Membre extrêmement actif
    Avatar de Muchos
    Homme Profil pro
    Enseignant
    Inscrit en
    Décembre 2011
    Messages
    1 704
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Ardennes (Champagne Ardenne)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Décembre 2011
    Messages : 1 704
    Billets dans le blog
    6
    Par défaut
    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>

  3. #3
    Invité
    Invité(e)
    Par défaut
    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.

  4. #4
    Membre extrêmement actif
    Avatar de Muchos
    Homme Profil pro
    Enseignant
    Inscrit en
    Décembre 2011
    Messages
    1 704
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Ardennes (Champagne Ardenne)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Décembre 2011
    Messages : 1 704
    Billets dans le blog
    6
    Par défaut
    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.)

  5. #5
    Invité
    Invité(e)
    Par défaut
    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.

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 198
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 198
    Par défaut
    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.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. <table> avec <thead> en position absolue et <tbody> dans un ascenseur
    Par Benduroy dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 21/11/2012, 16h35
  2. [Access] Nom d'une table avec un espace dans SQL
    Par Corsaire dans le forum Langage SQL
    Réponses: 7
    Dernier message: 21/04/2006, 15h50
  3. Mise à jour d'une table avec un fichier csv
    Par blackangel dans le forum PostgreSQL
    Réponses: 4
    Dernier message: 26/05/2005, 14h46
  4. [syntaxe]Creation table avec nom dynamique
    Par ZuZu dans le forum MS SQL Server
    Réponses: 6
    Dernier message: 23/09/2004, 18h01
  5. Création de table avec index
    Par Seb7 dans le forum Requêtes
    Réponses: 2
    Dernier message: 10/04/2003, 16h11

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo