PHP|Débutant :: Forums

Advertisement

Besoin d'aide ? N'hésitez pas, mais respectez les règles

Vous n'êtes pas identifié(e).

#1 08-07-2011 03:35:13

Maljuna Kris
Infantimigulo
Lieu : Douarnenez 29100 Breizh Izel
Inscription : 08-05-2009
Messages : 2 453
Site Web

faire un tableau HTML à <tbody> scrollable verticalement

Saluton,
Pour une application comptable j'ai besoin d'afficher, dans un tableau HTML formaté, la balance avec une ligne par compte (il y a plus de 200 comptes).
J'aimerais que les parties <thead> et <tfoot> du tableau soit fixes à l'écran et la partie <tbody> scrollable verticalement entre l'entête et le pied du tableau.
Actuellement, je fais ça avec trois <div> contenant chacune un tableau, celle du milieu étant scrollable verticalement, mais je trouve que ça fait bricolé.
Y-a-t-il un moyen avec les CSS d'obtenir ce mode d'affichage d'un tableau qui fonctionne avec tous les navigateurs, à ma connaissance non, alors voyez-vous une autre astuce ?
Merci.



Gloire à qui n'ayant pas d'idéal sacro-saint,
Se borne à ne pas trop emmerder ses voisins. G. Brassens Don Juan 1976.
Avĉjo MoKo kantas
La chaîne YouTube MoKo Papy

Hors ligne

#2 08-07-2011 03:52:45

Maljuna Kris
Infantimigulo
Lieu : Douarnenez 29100 Breizh Izel
Inscription : 08-05-2009
Messages : 2 453
Site Web

Re : faire un tableau HTML à <tbody> scrollable verticalement

Je suis en train de tester ça, je vous tiendrai au courant.


Gloire à qui n'ayant pas d'idéal sacro-saint,
Se borne à ne pas trop emmerder ses voisins. G. Brassens Don Juan 1976.
Avĉjo MoKo kantas
La chaîne YouTube MoKo Papy

Hors ligne

#3 10-07-2011 09:15:40

Jc
Membre
Lieu : Zillisheim - Alsace
Inscription : 15-04-2010
Messages : 1 620
Site Web

Re : faire un tableau HTML à <tbody> scrollable verticalement

Bonjour MK,

Parfois, on est bien obligés de bricoler un peu... je fais pareil que toi (sans footer en général), et je ne connais pas d'autres solutions. peut être en CSS 3? tiens-nous au courant.

++


POO PHP+Ajax en MVC avec PDO et Bases de données épaisses  : What else?

Hors ligne

#4 13-07-2011 12:57:18

Maljuna Kris
Infantimigulo
Lieu : Douarnenez 29100 Breizh Izel
Inscription : 08-05-2009
Messages : 2 453
Site Web

Re : faire un tableau HTML à <tbody> scrollable verticalement

Bon, ça avance, lentement, mais ça avance.
En fait, l'astuce consiste à jouer sur les positionnements des éléments du <table>
<caption>{top:-3em;left:0} <thead>{top:0;left:0} et <tfoot>{bottom:0;left:0} doivent être positionnés absolus alors que <table> est déclarée en overflow auto, le tout dans une boîte positionnée en relatif.
Du coup, l'ascenseur n'est plus associé qu'au <tbody>.
Par contre, je n'arrive pas à figer la largeur des colonnes du <tbody>, (ce sont ses lignes qui sont affichées en dynamique par ajax), il y a un décalage avec les entêtes du <thead> pourtant toutes les cellules d'une colonne appartiennent à une même classe, qu'elles soient en <thead>,<tfoot> ou <tbody>, classe dont le width est fixé par CSS.
J'ai encore un problème avec le background de la <td> du <tfoot>, mais c'est à la marge.


Gloire à qui n'ayant pas d'idéal sacro-saint,
Se borne à ne pas trop emmerder ses voisins. G. Brassens Don Juan 1976.
Avĉjo MoKo kantas
La chaîne YouTube MoKo Papy

Hors ligne

#5 13-07-2011 18:53:07

Jc
Membre
Lieu : Zillisheim - Alsace
Inscription : 15-04-2010
Messages : 1 620
Site Web

Re : faire un tableau HTML à <tbody> scrollable verticalement

Normalement le fait que ces lignes soient affichées en dynamique par ajax ne pose pas de problème vu que leur contenu est controllé par une classe de style CSS.
Comme les tables ont une facheuse tendance à "combler les vides" (par ex un tableau de 550px avec 5 colonnes à 100px, la dernière ou la première sera réajustée pour que la totalité fasse 550px de large), essaye d'utiliser entre la définition de table et ton thead, une définition <col style="width:100px;"/> par exemple et pour chaque colonne et arrange toi pour que la totalité de la largeur soit utilisée. De toute manière c'est un impératif pour ne pas avoir d'ascenseur horizontal.

++


POO PHP+Ajax en MVC avec PDO et Bases de données épaisses  : What else?

Hors ligne

#6 14-07-2011 12:55:29

Maljuna Kris
Infantimigulo
Lieu : Douarnenez 29100 Breizh Izel
Inscription : 08-05-2009
Messages : 2 453
Site Web

Re : faire un tableau HTML à <tbody> scrollable verticalement

Jc a écrit :

Normalement le fait que ces lignes soient affichées en dynamique par ajax ne pose pas de problème vu que leur contenu est controllé par une classe de style CSS.
Comme les tables ont une facheuse tendance à "combler les vides" (par ex un tableau de 550px avec 5 colonnes à 100px, la dernière ou la première sera réajustée pour que la totalité fasse 550px de large), essaye d'utiliser entre la définition de table et ton thead, une définition <col style="width:100px;"/> par exemple et pour chaque colonne et arrange toi pour que la totalité de la largeur soit utilisée. De toute manière c'est un impératif pour ne pas avoir d'ascenseur horizontal.

++

La notion d'ascenseur horizontal me laisse songeur roll, du strict point de vue sémantique, car, en l'occurrence cette barre de translation horizontal n'apparaît jamais.
C'est que les tailles des cellules du thead et du tfoot, présents dans la page au chargement de celle-ci, ne coïncident pas avec celles des cellules des tr du tbody qui, elles, y sont incrustées par ajax via l'.innerhtml.
Les autres attributs de style de leurs classes (background alternatif des tr, text-align center right ou left) sont bien pris en compte, mais
pas width.
C'est juste agaçant.
Comme c'est la seule partie du tableau qui varie en fonction de choix opérés dans des <select>, je ne vois pas l'intérêt de régénérer à chaque fois l'ensemble du tableau, caption, thead, tfoot et tbody.


Gloire à qui n'ayant pas d'idéal sacro-saint,
Se borne à ne pas trop emmerder ses voisins. G. Brassens Don Juan 1976.
Avĉjo MoKo kantas
La chaîne YouTube MoKo Papy

Hors ligne

#7 14-07-2011 13:03:31

steeve
Membre
Inscription : 16-06-2011
Messages : 103

Re : faire un tableau HTML à <tbody> scrollable verticalement

as tu essayer de mettre le width en % ?

Hors ligne

#8 14-07-2011 13:43:41

Jc
Membre
Lieu : Zillisheim - Alsace
Inscription : 15-04-2010
Messages : 1 620
Site Web

Re : faire un tableau HTML à <tbody> scrollable verticalement

Certes la sémantique n'etait pas au rendez-vous.
Ce n'est pas normal que ton retour ajax ne soit pas conforme aux définitions de ton tableau, et ce malgré la balise <col>.
Vérifie tout cela et tiens moi au courant. Merci.


POO PHP+Ajax en MVC avec PDO et Bases de données épaisses  : What else?

Hors ligne

#9 14-07-2011 14:58:49

Maljuna Kris
Infantimigulo
Lieu : Douarnenez 29100 Breizh Izel
Inscription : 08-05-2009
Messages : 2 453
Site Web

Re : faire un tableau HTML à <tbody> scrollable verticalement

Bon je crois que j'ai réglé le problème.
Les width des <div> étaient définies en em et celles des cellules en px. J'ai tout passé en em et c'est correct à 99.99%, une colonne de libellés qui gagne 4 à 5 pixels sur certaines classes de comptes.
Je pense aussi que la barre de translation verticale (ascenseur) facultative (overflow:auto) et qui mange sur la largeur du tableau, influe sur ce comportement erratique.
Je ne vois pas d'attribut de style qui permette qu'elle soit outer, un margin-rignt de tbody peut-être ?
D'autre part la définition des <col> n'interfère pas de manière significative et visible.


Gloire à qui n'ayant pas d'idéal sacro-saint,
Se borne à ne pas trop emmerder ses voisins. G. Brassens Don Juan 1976.
Avĉjo MoKo kantas
La chaîne YouTube MoKo Papy

Hors ligne

#10 14-07-2011 15:08:45

Maljuna Kris
Infantimigulo
Lieu : Douarnenez 29100 Breizh Izel
Inscription : 08-05-2009
Messages : 2 453
Site Web

Re : faire un tableau HTML à <tbody> scrollable verticalement

J'ai élargi la boîte qui contient le <tbody> de 82em à 83.1em et lorsque la barre de translation apparaît c'est limite parfait, par contre, quand il n'y a pas assez de lignes pour qu'elle apparaisse, les colonnes s'élargissent vers la droite et ça décale en tout de 1.1em, évidemment.
Quels sont les attributs d'overflow à part auto ? visible, hidden ou scroll. Je vais essayer scroll


Gloire à qui n'ayant pas d'idéal sacro-saint,
Se borne à ne pas trop emmerder ses voisins. G. Brassens Don Juan 1976.
Avĉjo MoKo kantas
La chaîne YouTube MoKo Papy

Hors ligne

#11 14-07-2011 15:16:53

Maljuna Kris
Infantimigulo
Lieu : Douarnenez 29100 Breizh Izel
Inscription : 08-05-2009
Messages : 2 453
Site Web

Re : faire un tableau HTML à <tbody> scrollable verticalement

Super ce scroll, quand les barres sont inutiles elles sont grisées et inactivables, mais en place donc la largeur du tableau ne varie plus.
Par contre ça force une barre horizontale grisée inutile, mais je ne trouve pas ça trop gênant.
J'ai toujours une petite variation de la largeur de la colonne intitulés sur certaines classes de comptes aux intitulés plus longs que les autres et pourtant j'ai taillé la colonne large, 26em.
Aucun intitulé n'est tronqué ni ne déborde.
J'ai aussi regardé du côté de table-layout:fixed, sans résultat.


Gloire à qui n'ayant pas d'idéal sacro-saint,
Se borne à ne pas trop emmerder ses voisins. G. Brassens Don Juan 1976.
Avĉjo MoKo kantas
La chaîne YouTube MoKo Papy

Hors ligne

#12 14-07-2011 15:51:47

Jc
Membre
Lieu : Zillisheim - Alsace
Inscription : 15-04-2010
Messages : 1 620
Site Web

Re : faire un tableau HTML à <tbody> scrollable verticalement

En fait il faut que tu restes en auto. et il faut que tu prévoyes la largeur de tes colonnes en fonction de la largeur totale ascenceur inclus. Cela reviens à ce que je t'expliquais au départ. Avec une div, il faut que la largeur de ta div soit égale à la largeur de ton tableau+ largeur de l'ascenseur + petite marge (1-3px) pour assurer les décalages de navigateur.


POO PHP+Ajax en MVC avec PDO et Bases de données épaisses  : What else?

Hors ligne

#13 14-07-2011 16:39:20

Maljuna Kris
Infantimigulo
Lieu : Douarnenez 29100 Breizh Izel
Inscription : 08-05-2009
Messages : 2 453
Site Web

Re : faire un tableau HTML à <tbody> scrollable verticalement

Jc a écrit :

En fait il faut que tu restes en auto. et il faut que tu prévoyes la largeur de tes colonnes en fonction de la largeur totale ascenceur inclus. Cela revient à ce que je t'expliquais au départ. Avec une div, il faut que la largeur de ta div soit égale à la largeur de ton tableau+ largeur de l'ascenseur + petite marge (1-3px) pour assurer les décalages de navigateur.

C'est exactement ce que j'ai fait mais, en auto, quand il n'y a pas d'ascenseur, le tbody s'élargit pour prendre toute la largeur de la div, il se fout des width des cellules ou des col.
La seule chose que je n'ai pas essayée c'est de mettre une width sur table ou sur tbody.
Bon, de toutes façons, je dois en rester là car Dame 4'in me tanne pour préparer les bagages, nous partons pour Crayssac (46) demain matin.

A bientôt les petits loups.


Gloire à qui n'ayant pas d'idéal sacro-saint,
Se borne à ne pas trop emmerder ses voisins. G. Brassens Don Juan 1976.
Avĉjo MoKo kantas
La chaîne YouTube MoKo Papy

Hors ligne

#14 24-10-2011 23:32:13

Jc
Membre
Lieu : Zillisheim - Alsace
Inscription : 15-04-2010
Messages : 1 620
Site Web

Re : faire un tableau HTML à <tbody> scrollable verticalement

Bonsoir MK,

Dans le style CSS de ton tableau (balise table) utilise

table-layout: fixed;

et tu verras, il aura un comportement bien docile, ensuite pas besoin de redéfinir les largeurs pour chaque ligne.
Dans ton premier tableau tu cales ta largeur avec un <col style="width:100px"> par exemple et dans le deuxième pareil. Sinon tu as juste besoin de régler ta largeur sur les <td> de la première ligne.

++


POO PHP+Ajax en MVC avec PDO et Bases de données épaisses  : What else?

Hors ligne

#15 25-10-2011 06:23:58

Maljuna Kris
Infantimigulo
Lieu : Douarnenez 29100 Breizh Izel
Inscription : 08-05-2009
Messages : 2 453
Site Web

Re : faire un tableau HTML à <tbody> scrollable verticalement

Rappel de mon post du 14-07-2011

Maljuna Kris a écrit :

J'ai aussi regardé du côté de table-layout:fixed, sans résultat.


Gloire à qui n'ayant pas d'idéal sacro-saint,
Se borne à ne pas trop emmerder ses voisins. G. Brassens Don Juan 1976.
Avĉjo MoKo kantas
La chaîne YouTube MoKo Papy

Hors ligne

#16 25-10-2011 07:56:31

Jc
Membre
Lieu : Zillisheim - Alsace
Inscription : 15-04-2010
Messages : 1 620
Site Web

Re : faire un tableau HTML à <tbody> scrollable verticalement

Ah... Peut-être que j'ai raté un truc, car moi avec un table-layout:fixed, ca change tout, je cales mes tableaux dans mes deux div comme je veux, et tout est toujours bien aligné. Faudrait que je reprenne ma méthodologie de A à Z pour la comparer avec la tienne pour voir où sont les différences, parce que je n'ai aucun problème dans l'alignement de mes colonnes entre les deux tableaux.
Globalement il y a trois choses à laquelle je fais attention pour que cela marche bien : que la somme de la largeur de mes colonnes corresponde bien à la largeur totale du tableau, que la largeur du texte contenu dans les colonnes de la première ligne ne soit pas supérieur à la largeur définie et enfin, l'ordre avec laquelle je cale mes largeurs: 1ere colonne de gauche, puis toutes les autres colonnes en partant de la droite vers la gauche.

J'espère que cela t'aura aidé.

++

Dernière modification par Jc (25-10-2011 07:57:03)


POO PHP+Ajax en MVC avec PDO et Bases de données épaisses  : What else?

Hors ligne

#17 02-11-2011 18:14:27

rosy123
Membre
Inscription : 02-11-2011
Messages : 6

Re : faire un tableau HTML à <tbody> scrollable verticalement

Je découvre ton blog à l’instant ,et tous ces informations sont intéressantes donc un petit mot d’encouragement pour la suite. Pas de pub SVP

Dernière modification par rosy123 (02-11-2011 18:15:12)

Hors ligne

#18 18-11-2011 15:48:13

elanari
Membre
Inscription : 18-11-2011
Messages : 1

Re : faire un tableau HTML à <tbody> scrollable verticalement

Bonjour!
J'ai le meme souci d'alignement des colonnes avec le header et je voulais savoir si quelqu'un avait trouvé une solution.
J'utilise la méthode 1 du lien donné plus haut : ici

Hors ligne

#19 11-10-2012 15:39:26

Maljuna Kris
Infantimigulo
Lieu : Douarnenez 29100 Breizh Izel
Inscription : 08-05-2009
Messages : 2 453
Site Web

Re : faire un tableau HTML à <tbody> scrollable verticalement

Je botte un peu en touche mais ce plugin JQuery semble réaliser ce que nous recherchons.
jquery-scrollable-table-plugin


Gloire à qui n'ayant pas d'idéal sacro-saint,
Se borne à ne pas trop emmerder ses voisins. G. Brassens Don Juan 1976.
Avĉjo MoKo kantas
La chaîne YouTube MoKo Papy

Hors ligne

#20 11-10-2012 18:02:50

Pierrot
Ancien nouveau
Inscription : 08-05-2009
Messages : 1 166

Re : faire un tableau HTML à <tbody> scrollable verticalement

a fond dans jquery en ce moment mon pti MK big_smile
a++

Hors ligne

#21 11-10-2012 22:54:52

Maljuna Kris
Infantimigulo
Lieu : Douarnenez 29100 Breizh Izel
Inscription : 08-05-2009
Messages : 2 453
Site Web

Re : faire un tableau HTML à <tbody> scrollable verticalement

Disons que la lecture du bouquin d'Éric Sarrion m'a fait prendre conscience qu'au prix du sacrifice d'un peu de temps de chargement (dans le cache du navigateur) on avait là un outil côté client qui, comme le dit la pub "just write less but do more" et, qui plus est, on s'affranchit des problèmes de compatibilité entre les navigateurs et l'on peut réaliser des effets de style inaccessibles avec juste les règles CSS.
Mais bon, c'est tout un apprentissage, et cela complique encore l'architecture MVC.
Donc je ne pense pas que ce soit juste en ce moment mais plutôt dorénavant, que je suis dans le JQUERY, quant à y être à fond, il me reste encore à creuser.


Gloire à qui n'ayant pas d'idéal sacro-saint,
Se borne à ne pas trop emmerder ses voisins. G. Brassens Don Juan 1976.
Avĉjo MoKo kantas
La chaîne YouTube MoKo Papy

Hors ligne

#22 08-11-2012 15:58:57

Jc
Membre
Lieu : Zillisheim - Alsace
Inscription : 15-04-2010
Messages : 1 620
Site Web

Re : faire un tableau HTML à <tbody> scrollable verticalement

Bonjour,

Maljuna Kris a écrit :

Mais bon, c'est tout un apprentissage, et cela complique encore l'architecture MVC.

Je ne dirais pas que cela complique l'architecture MVC, mais plutôt que cela recadre les choses notamment avec les dérives du "tout PHP" qui reste une hérésie dans un contexte client-serveur web. Pour mettre sur la voie et pour simplifier, La Vue gérée au niveau client, Le Contrôleur au niveau PHP et le Modèle au niveau BD (version SGBDR Epais). Les choses deviennent beaucoup plus simples, efficaces, minimalistes, et concises, donc que de la performance!

Ensuite, je te concède bien volontiers que c'est un apprentissage, et j'irai même jusqu'à dire pour tous ceux qui font du Javascript sans l'avoir appris, apprenez-le vraiment !!!!

Dernière modification par Jc (08-11-2012 16:00:41)


POO PHP+Ajax en MVC avec PDO et Bases de données épaisses  : What else?

Hors ligne

#23 08-11-2012 16:18:22

ManicoW
Cowrespondant
Lieu : Tours
Inscription : 08-05-2009
Messages : 190
Site Web

Re : faire un tableau HTML à <tbody> scrollable verticalement

Bonjour,

Moi je pense que ca complique bien l'architecture MVC, car il faut deux modes de fonctionnement.

En effet, pour des raisons d'accessibilité très diverses, il faut prévoir un mode dégradé de fonctionnement, sans javascript. Exemples :

- navigateurs en mode texte depuis un serveurs
- IE qui a décidé de ne plus interpréter le javascript, ou partiellement (ne rigolez pas, j'en connais plusieurs dizaines a qui c'est arrivé ça)

Sans compter que tout ce qui est controle de sécurité doit bien sur se faire coté serveur (mais ca, jquery ou pas, il ne faut pas l'oublier).

Je pars donc depuis longtemps sur le principe qu'un site doit fonctionner, au moins de manière dégradée, sans javascript, et que le javascript ne sert ensuite qu'a rendre les choses plus ergonomique et intuitive, autant que l'on peut.

(oui je sais, ce forum en est un très mauvais exemple, le captcha d'inscription nécessite du javascript, il faudra que je rajoute d'autres choix de captcha un jour).

@+
ManicoW


la v2, c'est tabou, on en viendra tous a bout

Hors ligne

#24 08-11-2012 17:43:24

Jc
Membre
Lieu : Zillisheim - Alsace
Inscription : 15-04-2010
Messages : 1 620
Site Web

Re : faire un tableau HTML à <tbody> scrollable verticalement

Merci Manicow pour ton retour,

- Je serai curieux de voir le code et/ou l'Etat de santé de l'ordinateur de ceux à qui c'est arrivé, sans vouloir remettre en cause leur compétences bien entendu.
- La gestion de la vue côté client, n'a jamais été une brèche de sécurité en soit dès lors que les précautions d'usage de codage dans un contexte client-serveur sont respectés. Par définition elle se contente de mettre en forme des données et d'en gérer idéalement un cache associé.
- Ensuite tout dépends de ce que l'on développe, mais dans un contexte MVC, il doit bien s'agir normalement d'une véritable application web qui se respecte et non d'un site vitrine.

++


POO PHP+Ajax en MVC avec PDO et Bases de données épaisses  : What else?

Hors ligne

#25 08-11-2012 18:03:00

ManicoW
Cowrespondant
Lieu : Tours
Inscription : 08-05-2009
Messages : 190
Site Web

Re : faire un tableau HTML à <tbody> scrollable verticalement

Re,

- le code n'est pas trop concerné dans ce cas, vu que se sont les utilisateurs du service, par les développeurs. L'état de santé de l'ordi, ben j'ai vu un peu de tout, de mme Michu et quelqu'un de plus avancé, mais en général le problème est sous entendu dans le logiciel utilisé, qui dit IE dit win, et après quelques années d'usage... tous n'ont pas la patience de réinstaller big_smile Et puis il reste le cas de la navigation en mode texte (dans mon cas je remercie nvidia de ne pas avoir un site trop chiant pour ça, surtout sur la partie driver, quand X ne veut pas démarrer big_smile).

- en effet, la vue coté client ne pose pas de soucis, mais bon, j'ai déjà vu des gens (je ne parle pas de toi ou de mk, mais on est lu parfois wink) qui ont mis un controle de valeurs d'un formulaire tout en javascript, et qui du coup se dire "bah j'ai pas besoin de valider coté serveur"... forcément, après, ca se fait pirater sec smile

- ha mais non, moi je veux un site vitrine qui aurait put être totalement statique avec tout en js et php, non mais ! wink

Note bien au final que je ne suis pas contre jquery et ses amis (je m'y met d'ailleurs doucement), mais que je pense qu'il faut garder a l'esprit que cela peut poser problème. Du coup en général je commence par poser une base fonctionnelle sans js, puis j'ajoute du js, tout en le conservant non obligatoire, et pour vérifier, je teste le site sans js. Ca fonctionne bien comme méthode, même si c'est parfois un peu contraignant (par exemple pour ceux qui aime les menus repliables, quand on met ca en js on a tendance a les mettre fermés et faire la fonctionnalité pour les déplier en js, alors qu'il faut en fait les mettres ouvert, les fermer au chargement de la page via js, et avoir la fonctionnaliter pour les déplier/replier en js, et dans ce cas, si pas de js, ben les menus sont quand meme là, moins beau, mais ça fonctionne (tm))

Donc on est d'accord sur le gros de la chose smile

@+
ManicoW


la v2, c'est tabou, on en viendra tous a bout

Hors ligne

Pied de page des forums