tableau scrollable

Question

Bonjour, J'ai un problème avec un tableau. Je veux un tableau avec l'entête fixe et le corps du tableau qui puisse défiler. Voilà une partie de mon code concernant ce tableau : --- { print("'); } --- En sortie j'ai l'entête comme ceci : ---------------------------------------------------------------- | Commune |Naissance| Nom |Prénom | |----------------------------------| | |Paris 01/01/1970 TOTO Prénom | | ..... J'ai donc la cellule th commune de l'entête qui recouvre les 4 cellules td et sous les cellules th naissance, nom et prénom je n'ai rien. je n'ai pas d'ascenseur à droite (malgré mon overflow:auto ou même scroll), mais je peux quand même défiler avec la souris. Mais en défilant l'entête remonte, elle ne reste pas fixe. Mes largeurs de cellule s'alignent sur le plus grand mot et non sur ma largeur que j'ai définie. Donc mes questions, qu'est ce que j'ai fait ou pas fait dans ce code qui ne convient pas ? Je souhaiterais que les cellules th de l'entête correspondent aux cellules td des lignes du tableau. Je souhaiterais qu'il y ait un ascenseur sur la droite et que mon entête reste fixe. Je souhaiterais alterner une ligne sur 2 avec une couleur (pourtant testé et non pris en compte). Je souhaiterais que les mots composés s'affichent sur une seule ligne (par ex un prénom comme Jean Marie est écrit sur 2 lignes) Je souhaiterais que les largeurs définies par mes width soient bien prises en compte. Et de plus le bouton input type=submit value="Retour" de l'avant dernière ligne ne s'affiche pas car le tableau prend tout l'écran. J'essaie tout un tas de variantes et je n'arrive toujours pas, alors merci beaucoup si vous pouvez me sortir de ce pétrin. Amicalement.

cs_theodoree · Answer

En fait l'ascenseur y est bien et mon bouton retour aussi, mais le tableau fait la hauteur de toutes les lignes de mon fichier malgré la largeur et la hauteur que j'ai pourtant défini en witdh et height dans <table> et là non plus ce n'est pas pris en compte.

TychoBrahe · Answer

Salut,

Donc mes questions, qu'est ce que j'ai fait ou pas fait dans ce code qui ne convient pas ?
La grosse bêtise que je vois est d'abord conceptuelle : il faut éviter autant que possible de faire de la mise en forme dans le html. Commence donc déjà par virer tous les attributs qui servent à al mise en forme de ton tableau et utilise une feuille de style séparée, ce sera bien plus pratique.

Je souhaiterais que les mots composés s'affichent sur une seule ligne (par ex un prénom comme Jean Marie est écrit sur 2 lignes)
Désolé, mais ceci est impossible à garantir. On peut en limiter au maximum le risque mais pas l'exclure totalement.

cs_theodoree · Answer

Bonjour, Voilà j'avance mais encore des problèmes : --- print(" "); print("Enregistrements pour $resultat\"); print(\"---- \"); print(\"Commune |\"); print(\"Naissance |\"); print(\"Nom |\"); print(\"Prénom |\"); print(\"\"); print(\"\"); $ligne = 0; while (list($s_paroisse, $s_date_n, $s_nom, $s_prenom) = mysql_fetch_row($result)) { if ($ligne == 0) { print(\"---- \"); $ligne = 1; } else { print(\"---- \"); $ligne = 0; } print(\"$s_paroisse, \"); print(\"$s_date_n, \"); print(\"$s_nom, \"); print(\"$s_prenom, \"); print(\"\"); } print(" "); --- J'ai bien mon tableau complet, titre et lignes bien alignés, mais encore ces manques : Malgré mon width et mon height dans le div de la table, le tableau se cale à gauche avec une largeur correspondante aux plus grands mots des lignes et dépasse l'écran en hauteur. J'ai sur la droite de l'écran une ligne pour un ascenseur, mais elle est disabled et n'a pas le grand bouton de déplacement malgré mon overflow:scroll Mon entête n'est pas fixe et remonte quand je déplace les lignes vers le bas avec la roulette de la souris. Et toujours les largeurs de cellule se calent sur le plus grand mot et non sur mon width qui est pourtant défini. Je mettrais tous les styles en css quand tout sera au point. Merci de vos réponses.

TychoBrahe · Answer

Salut,

Je mettrais tous les styles en css quand tout sera au point.
C'est une idée exceptionnellement mauvaise.

Sinon j'ai un petit truc qui devrais t'aider : jQuery Scrollable Table Plugin. Bien entendu, pour utiliser ce plugin il te faut utiliser jQuery.

cs_theodoree · Answer

J'ai trouvé !!!
Une classe dans le thead avec un display:block, les width et height et une classe dans le tbody avec overflow:auto, un display:block et les width et height, puis définition du td avec sa width.
Et çà marche super bien.
Merci à tous.

Tableau scrollable

5 réponses

Votre réponse

Discussions similaires