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 :

Fixer ligne de titre (th) d'un tableau [HTML 5]


Sujet :

HTML

  1. #1
    Membre expérimenté
    Avatar de sat83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Mars 2004
    Messages
    1 040
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Mars 2004
    Messages : 1 040
    Points : 1 309
    Points
    1 309
    Par défaut Fixer ligne de titre (th) d'un tableau
    Bonjour à tous,

    Mon problème me parait simple, mais je ne parvient pas à faire ce que je souhaite:
    J'ai un tableau avec de nombreuses lignes, et je souhaite figer la ligne d'entête des colonnes (th), et scroller sur le contenu.

    Après de nombreuse recherche, la solution semble être de fixer la taille du tbody, mais ça ne fonctionne pas (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
    <table>
    	<thead>
    		<tr><th>TITRE1</th><th>TITRE2</th><th>TITRE3</th><th>TITRE3</th></tr>
    	</thead>			
    	<tbody style="height:250px;max-height:250px;overflow-y:auto;" >
    		<tr><td>aaaaaa</td><td>bbbbbbbbbbbbbb</td><td>ccccccccc</td><td>dddddddd</td></tr>
    		<tr><td>aaaaaa</td><td>bbbbbbbbbbbbbb</td><td>ccccccccc</td><td>dddddddd</td></tr>
    		<tr><td>aaaaaa</td><td>bbbbbbbbbbbbbb</td><td>ccccccccc</td><td>dddddddd</td></tr>
    		[...]
    		<tr><td>aaaaaa</td><td>bbbbbbbbbbbbbb</td><td>ccccccccc</td><td>dddddddd</td></tr>
    		<tr><td>aaaaaa</td><td>bbbbbbbbbbbbbb</td><td>ccccccccc</td><td>dddddddd</td></tr>
    		<tr><td>aaaaaa</td><td>bbbbbbbbbbbbbb</td><td>ccccccccc</td><td>dddddddd</td></tr>
    		<tr><td>aaaaaa</td><td>bbbbbbbbbbbbbb</td><td>ccccccccc</td><td>dddddddd</td></tr>
    	</tbody>
    </table>
    Est-ce que je m'y prend mal (probablement)? Si oui, quelle est la solution pour faire ça simplement ?
    Ce que l'on apprend par l'effort reste toujours ancré plus longtemps...

  2. #2
    Membre expérimenté
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Avril 2003
    Messages
    1 303
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine Saint Denis (Île de France)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : Service public

    Informations forums :
    Inscription : Avril 2003
    Messages : 1 303
    Points : 1 380
    Points
    1 380
    Par défaut
    Je ferais ça avec deux div, un pour l'entête et un scrollable pour le reste du tableau.
    Christophe

    Pensez à mettre quand c'est le cas.

  3. #3
    Membre expérimenté
    Avatar de sat83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Mars 2004
    Messages
    1 040
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Mars 2004
    Messages : 1 040
    Points : 1 309
    Points
    1 309
    Par défaut
    Ca ne fonctionne pas mieux malheureusement...

    Je pensais avoir trouver la réponse à mon problème sur un autre forum, mais ça ne fonctionne pas totalement: Il y a un léger décalage dans la taille des colonnes (à cause de la scrollbar), et si le contenu d'une cellule est plus grand que prévu la taille de l'en tête ne suis pas.

    Bref, si quelqu'un à une solution, je suis toujours preneur!

    Merci!
    Ce que l'on apprend par l'effort reste toujours ancré plus longtemps...

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

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

    Informations forums :
    Inscription : Décembre 2011
    Messages : 1 700
    Points : 3 849
    Points
    3 849
    Billets dans le blog
    6

  5. #5
    Membre expérimenté
    Avatar de sat83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Mars 2004
    Messages
    1 040
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Mars 2004
    Messages : 1 040
    Points : 1 309
    Points
    1 309
    Par défaut
    Après de multiples essais infructueux, la solution que j'ai adoptée, la plus simple et efficace dans mon cas:

    Le plugin jQuery http://www.fixedheadertable.com/ qui ne nécessite quasi aucune modification (html ou css) du code existant.

    [EDIT] : Je me suis réjoui un peu trop rapidement, ce plugin n'est pas aussi "magique" que ce que je pensais, et nécessite pas mal d'ajustements dans mon code. Mais bon, à défaut d'autre chose!
    Ce que l'on apprend par l'effort reste toujours ancré plus longtemps...

  6. #6
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 418
    Points
    91 418
    Billets dans le blog
    20
    Par défaut
    Le pire dans cette histoire, c'est que (de mémoire) ce comportement est supposé être le comportement par défaut pour l'en-tête d'une table comme défini par le W3C mais mis en oeuvre par aucun navigateur car trop complexe à mettre en place.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

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

Discussions similaires

  1. Réponses: 2
    Dernier message: 03/03/2009, 09h32
  2. Fixer la ligne de titre d'un tableau dans un div
    Par slopera dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 26/01/2009, 15h25
  3. supprimer toutes les lignes d'un flexgrid sauf la ligne de titre
    Par cari dans le forum VB 6 et antérieur
    Réponses: 5
    Dernier message: 11/08/2006, 11h39
  4. Réponses: 14
    Dernier message: 19/11/2005, 19h56

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