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

Mise en page CSS Discussion :

Faire comme "figer les colonnes" d'Excel


Sujet :

Tableau en CSS

  1. #1
    Membre habitué
    Inscrit en
    Mai 2009
    Messages
    506
    Détails du profil
    Informations forums :
    Inscription : Mai 2009
    Messages : 506
    Points : 131
    Points
    131
    Par défaut Faire comme "figer les colonnes" d'Excel
    Je veux faire une page WEB qui se présente comme une feuille Excel, avec deux colonnes d'en-tête à gauche et une colonne d'en-tête en haut, et le tableau avec ses deux ascenseurs. Les deux colonnes de gauche suivent le mouvement vartical des ascenseurs, le la ligne d'en-tête en haut suit le mouvement horizontal de même.

    Pour cela, j'ai besoin de maitriser complètement le positionnement des <div> dans l'écran (je parle bien de l'écran physique, visible), et ça, je ne trouve pas somment faire : je désire connaître le nombre de pixels physique en hauteur et largeur, et j'ai l'impression que les spécifications du W3C sont faites pour que ce ne soit pas possible (si je me trompe, montrez-moi comment).

    Je trouve ça insensé : la présence et la position des ascenseurs, n'est-ce pas le premier point d'ergonomie d'un site ? Est-ce que les pixels de l'écran physique, ce n'est pas le premier point auquel s'intéresse le navigateur ?

    En espérant que quelqu'un saura me sortir du trou...

    AMIcalement.

  2. #2
    Modérateur

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

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 957
    Points : 44 121
    Points
    44 121
    Par défaut
    Bonjour,
    pas bien saisie en fait ce qu'est ton problème !
    Pour cela, j'ai besoin de maitriser complètement le positionnement des <div> dans l'écran (je parle bien de l'écran physique, visible),
    c'est quoi pour toi un « écran physique, visible », le viewport...dans ce cas regarde du coté de la méthode getBoundingClientRect().

  3. #3
    Membre habitué
    Inscrit en
    Mai 2009
    Messages
    506
    Détails du profil
    Informations forums :
    Inscription : Mai 2009
    Messages : 506
    Points : 131
    Points
    131
    Par défaut
    Après m'être débattu comme un beau diable avec des "document.body.scrollwidth" et des "window.innerwidth" qui me donnaient des résultats qui n'avaient rien à voir avec la taille de mon écran (que je connais fort bien), j'ai cherché avec mon ami Google, et j'ai pris connaissance des mondes des "pixels CSS" et toutes ces sortes de choses. Le "viewport" appartient à ce monde là, si j'ai bien compris.

    Et, toujours si j'ai bien compris, "ce monde" permet de développer (plus ou moins) le même site pour visualiser au Stade de France ou sur un smartphone : dans ces conditions, pourquoi pas ?

    Mais il se trouve que moi, ni l'un ni l'autre ne m'intéresse : juste les ordinateurs de bureau, dont les écrans (réels, physiques !) peuvent aller de 640x480 (enfin... de nos jours...?) jusqu'à mettons environ 2000x1600, que l'on regarde d'une distance comprise entre 1/2 et 1 mètre environ. Et, sur ces écrans, l'ergonomie de mon application exige (le mot est-il trop fort ?) que la fenêtre principale ne sorte pas de l'écran physique. C'est ça que j'appelle "maitriser les ascenseurs". Et c'est ça, si j'ai bien compris, qui est absolument étranger aux conceptions des gens du W3C, qui définissent les normes du Web, auxquelles, ensuite, les développeurs de navigateurs se plient plus ou moins... (enfin, j'ai cru comprendre aussi que les développeurs de chez Apple avaient fait un truc, et qu'après, le W3C avait couru derrière).

    Je vais regarder ta suggestion, et je reviendrai dire ce que j'ai compris... mais je n'ai pas bon moral.

    Merci quand même.

    AMIcalement

  4. #4
    Invité
    Invité(e)
    Par défaut
    Bonjour,
    Citation Envoyé par L'AMI Yves Voir le message
    ...si j'ai bien compris...
    METHODOLOGIE :

    1/ Pour commencer, il faut définir clairement les mots qu'on utilise :
    • une "colonne" horizontale s'appelle une "ligne"
    • un "tableau (HTML)" est aussi une "table", contenant des données "tabulaires" -> balise <table> (ou équivalent, sous forme de <div>, avec display:table / table-cell...)
    • la "surface utile" d'un navigateur s'appelle une "fenêtre" (ce n'est pas la taille de l'"écran" qui compte, mais bien celle de la "fenêtre", ou "window")
    • ...


    2/ Il faut aussi définir clairement le résultat qu'on veut obtenir

    3/ Une fois qu'on a défini clairement ce qu'on cherche à obtenir, on fait une :recherche:, avec les bons mots-clé, en ce concentrant sur les moyens d'obtenir le résultat.

    4/ On peut aussi chercher dans les différentes FAQ et cours.

    Si on suppose que le CSS peut servir :


    5/ Au final, on trouve des débuts de solutions :
    • overfow:auto;
    • position:fixed / relative / absolute;
    • display:table / table-cell
    • on apprend aussi qu'on peut définir une largeur en % (et pas forcément en pixels)
    • ...
    Dernière modification par Invité ; 17/07/2016 à 18h39.

  5. #5
    Membre habitué
    Inscrit en
    Mai 2009
    Messages
    506
    Détails du profil
    Informations forums :
    Inscription : Mai 2009
    Messages : 506
    Points : 131
    Points
    131
    Par défaut
    Eh bien, c'est déjà bien de recevoir une réponse... mais malheureusement, tu ne m'aides pas beaucoup.

    Sur la "colonne", d'accord. D'ailleurs, Excel propose en effet de "figer les volets" : autant pour moi.

    Quant à préciser ce que je veux obtenir, il me semble que cette référence à Excel (même si elle était mal formulée...) est tout à fait précise. Connais-tu cette fonctionnalité d'Excel ?

    Tu viens m'expliquer ce qu'est une "table" (en langage HTML) alors que je fais référence à un "tableau" Excel : c'est pas très dur de faire la correspondance.

    Je ne crois pas que les explications que j'ai données (si maladroites soient-elles) méritent que tu me traites avec une telle condescendance.

    Enfin, justement, le motif de mon intervention, c'est que, justement, j'ai besoin de ne plus être embêté par cet espèce de "machin" qu'en HTML on appelle "fenêtre", afin de véritablement pouvoir travailler sur l'écran, ce truc qui est bel et bien ce que l'utilisateur regarde, et sur lequel ce foutu navigateur inscrit ses élucubrations. Je voudrais gérer moi-même mes ascenseurs, et il me semble que ce désir était exprimé très clairement dans lon texte.

    Encore merci.

    AMIcalement.

  6. #6
    Invité
    Invité(e)
    Par défaut
    Tout ce que j'ai exprimé est une METHODOLOGIE à suivre.
    Rien d'autre.

    En l'occurence, il te faut "oublier" le mode de fonctionnement d'Excel, et comprendre celui d'un navigateur (affichage d'une page HTML dans une fenêtre du navigateur), pour pouvoir faire les recherches adéquates.

    "Ce qui se conçoit bien s'énonce clairement. Et les mots pour le dire arrivent aisément."
    Nicolas Boileau-Despréaux (1636-1711).
    N.B. "ascenseurs" se dit aussi "barre de défilement (ou scroll)" ou "scrollbar".
    (ça peut servir dans les recherches...)

    Citation Envoyé par L'AMI Yves Voir le message
    ...j'ai besoin de maitriser complètement le positionnement des <div> dans l'écran...
    Justement, les liens que j'ai donnés, vers la FAQ CSS ou les cours, devraient t'aider.

  7. #7
    Membre habitué
    Inscrit en
    Mai 2009
    Messages
    506
    Détails du profil
    Informations forums :
    Inscription : Mai 2009
    Messages : 506
    Points : 131
    Points
    131
    Par défaut
    Tu es bien aimable, et j'ai, sans aucun doute, beaucoup à apprendre dans ces tutos.

    Si tu voulais bien, cependant, éclairer ma lanterne sur un point ou deux, ça me permettrait de gagner beaucoup de temps. Pour ça, je vais dire ce que j'ai compris, et tu pourra peut-être m'indiquer où je fais fausse route.

    Je veux trois bandeaux l'un au dessus de l'autre :il s'agit donc de 3 <div> normales.

    Dans le bandeau du milieu, je veux deux <div> côte à côte : ce seront donc deux 'float'.

    Là où c'est le brouillard pour moi, c'est que la div de gauche a une largeur bien définie (actuellement 24rem, mais provisoire), tandis que je désire que celle de droite ait son ascenseur (sa barre de défilement, si tu préfères) juste au bord droit de l'écran - mettons du viewport, si tu veux, mais s'il y avait moyen qu'il n'y ait pas de "scrollbars" à droite et en bas, ma page web ne s'en porterait que mieux !

    Continuons : dans le bandeau du bas, il y a encore une ligne de même format qu'au-dessus, pour afficher des totaux par colonne : il y a donc encore deux "float". Et, en dessous, les habituels boutons "Ajouter", "Modifier", "Effacer" et "Retour". Et, comme c'est tout, je voudrais que ce bandeau soit placé tout en bas de (j'hésite à l'écrire...) l'écran.

    De plus, a priori, le calcul des totaux par colonne se fait "au fil de l'eau" en remplissant le bandeau du milieu, c'est à dire que je suis bien obligé de placer et remplir tout le bandeau du milieu avant de m'occuper de celui du bas : je ne sais pas comment gérer les hauteurs de mes différents bandeaux. J'ai seulement commencé à lire les tutos de CSS, je n'ai (encore ?) rien vu sur ce sujet.

    Merci de continuer à me lire..

    AMIcalement.

  8. #8
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    1/ d'abord, avant d'écrire quoi que ce soit en CSS, il faut D'ABORD :
    • faire un DESSIN des "boites" (= <div>), afin de bien visualiser le projet
      (imagine que ce sont effectivement des "boites", qui se posent l'une à coté ou en dessous de l'autre, ou les unes dans les autres)
    • écrire le code HTML des <div> : l'enchainement et les imbrications de "boites".

    Ensuite seulement on peur envisager le CSS.
    Les "boites" peuvent être identifiées par des id (unique) ou des classes.

    2/
    Citation Envoyé par L'AMI Yves Voir le message
    ...deux <div> côte à côte : ce seront donc deux 'float'...
    Non, pas forcément en "float".

    Il existe d'autre moyens :
    • display:table / table-cell;
    • display:flex


    3/ Concernant les barres de défilement :
    • overflow:auto / hidden;
    • overflow-x:auto;
    • overflow-y:auto;


    4/ Utilisation de tout l'espace de la fenêtre :
    • autant il est facile de définir les largeurs en %
    • autant pour les hauteurs, il est NECESSAIRE de définir les hauteurs de TOUS les parents (en % et/ou px)



    N.B. Je pourrais t'écrire les code HTML et CSS, mais ce ne serait pas... pédagogique.

  9. #9
    Membre habitué
    Inscrit en
    Mai 2009
    Messages
    506
    Détails du profil
    Informations forums :
    Inscription : Mai 2009
    Messages : 506
    Points : 131
    Points
    131
    Par défaut
    Je ne sais pas si ce que j'écris dans mes posts donne l'impression que je sui sun noeudnoeud ou un peu plus expérimenté, mais :

    - le code des "boites" a été écrit (par moi) il y a des années, dans des frames (et je te jure bien que je n'ai pas eu autant de problèmes, à l'époque...)

    - la ré-écriture des ces modules a été faite (enfin... tentée) en (espérant mesurer) mesurant la largeur de l'écran en pixels, en en déduisant une taille de caractères donnée dans <html>, puis toutes les mesures de caractères en rem, toutes les hauteurs et largeurs de <div> en % (parfois en rem, c'est vrai) et c'est là que ça a commencé à coincer : la largeur mesurée n'est pas celle de l'écran (pixels CSS !!!!!), et les largeurs et/ou hauteurs en % n'étaient pas respectées. Il s'en est suivi une profonde remise en question de toutes mes convictions, et de graves doutes sur mes compétences. Je me suis même aperçu que si je m'efforçais de bien indenter mes instructions HTML, cela changeait le rendu à l'écran : suprême scandale : les "retour chariot" dans le code se voient à l'écran !

    Je ne sais plus à quel saint me vouer !

    Tout ça pour dire que je ne veux en aucun cas que tu m"écrives le code (je le ré-écrirais de toutes façon), mais je veux bien que tu m'indiques dans quelle direction il te semble que je devrais diriger mes recherches: en particulier, est-ce que tu penses que "display:table-cell" ou autre pourrait m'aider ?

    AMIcalement.

  10. #10
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    Janvier 2004
    Messages
    9 868
    Détails du profil
    Informations personnelles :
    Âge : 40
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2004
    Messages : 9 868
    Points : 16 258
    Points
    16 258
    Par défaut
    Il y a une dizaine d'années maintenant, on a eu droit à ce post qui, je pense, pourrait t'aider :
    http://www.developpez.net/forums/d23...-colonne-fixe/

    Je n'ai pas regardé s'il y a avait un moyen plus optimisé disponible dans des versions supérieures de HTML/CSS.

  11. #11
    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
    Bonjour,

    l'utilisation du framework JavaScript DHTMLX pourrait vous aider : http://docs.dhtmlx.com/grid__index.html
    Christophe

    Pensez à mettre quand c'est le cas.

  12. #12
    Membre habitué
    Inscrit en
    Mai 2009
    Messages
    506
    Détails du profil
    Informations forums :
    Inscription : Mai 2009
    Messages : 506
    Points : 131
    Points
    131
    Par défaut
    Citation Envoyé par Bisûnûrs Voir le message
    Il y a une dizaine d'années maintenant, on a eu droit à ce post qui, je pense, pourrait t'aider :
    http://www.developpez.net/forums/d23...-colonne-fixe/

    Je n'ai pas regardé s'il y a avait un moyen plus optimisé disponible dans des versions supérieures de HTML/CSS.
    Je vais regarder tout ça. Recopié tel quel (en faisant la correction dans le javascript), ça marche sous les 5 navigateurs (dans des versions récentes, mais pas forcément les dernières). Il y a un petit problème de hauteurs de ligne, mais ça ne doit pas être grand chose... ou alors c'est là que le loup se cache : il n'y est pas pour les colonnes.

    Je vais maintenant l'adapter à mon application, et aussi tâcher de comprendre où je me suis paumé pour ne pas y être arrivé tout seul...)

    Merci, cette fois, j'ai le sentiment d'avancer.

    AMIcalement.

  13. #13
    Membre habitué
    Inscrit en
    Mai 2009
    Messages
    506
    Détails du profil
    Informations forums :
    Inscription : Mai 2009
    Messages : 506
    Points : 131
    Points
    131
    Par défaut
    Citation Envoyé par Christophe P. Voir le message
    Bonjour,

    l'utilisation du framework JavaScript DHTMLX pourrait vous aider : http://docs.dhtmlx.com/grid__index.html
    Merci d'apporter une pierre à l'édifice. Depuis que Microsoft a laissé tomber Visual Basic 6 au profit de son "machin" .Net, je suis assez réticent avec les framworks, d'une manière générale. Je code en PHP/MySQL/HTML/CSS/Javascript : je sais ce qu'il y a dans mes pages, je sais où vont mes liens, il n'y a pas d'espionnage dans mes pages. Pour les autres, on ne sait jamais.

    Bien sûr, parfois, ça me fait réinventer la roue...

    Encore merci.

    AMIcalement.

  14. #14
    Membre habitué
    Inscrit en
    Mai 2009
    Messages
    506
    Détails du profil
    Informations forums :
    Inscription : Mai 2009
    Messages : 506
    Points : 131
    Points
    131
    Par défaut
    Citation Envoyé par L'AMI Yves Voir le message
    ou alors c'est là que le loup se cache
    Il y a peut-être bien un loup, en effet. J'ai l'impression que le navigateur fait ce qu'il veut des dimensions qu'on lui donne, et que c'est ça le problème : il affecte la hauteur qui lui convient das "first_col", et une autre valeur (sans doute à cause de la "scrollbar", mais je ne comprends pas) dans "the_table". Et il ne fait pas les mêmes pirouettes avec les largeurs.

    De plus, dans cet exemple, j'ai l'impression que les largeurs/hauteurs "vraies" des cellules ne sont pas bien prises en compte : il faut tenir compte de border et padding - et je n'ai pas trop réussi à obtenir un résultat correct.

    Non, décidément, j'ai l'impression que ce problème - a priori banal à mes yeux - n'est pas du tout dans les idées du W3C...

    Je vais continuer...

    AMIcalement.

  15. #15
    Modérateur

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

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 957
    Points : 44 121
    Points
    44 121
    Par défaut
    S'il te plait d'arrête de nous bassiner avec des n'est pas du tout dans les idées du W3C... entre autres...

    Le W3C dicte des règles/spécifications/recommandations, appelles cela comme tu veux, et les navigateurs les respectent biens dans la grande majeure partie des cas.

    C'est à toi, en appliquant ces règles, de faire en sorte d'obtenir ce que tu veux.

    De plus, dans cet exemple, j'ai l'impression que les largeurs/hauteurs "vraies" des cellules ne sont pas bien prises en compte : il faut tenir compte de border et padding - et je n'ai pas trop réussi à obtenir un résultat correct.
    Ca c'est également le b.a.ba du CSS mais en te renseignant tu devrais tomber sur box-sizing:border-box.

  16. #16
    Membre habitué
    Inscrit en
    Mai 2009
    Messages
    506
    Détails du profil
    Informations forums :
    Inscription : Mai 2009
    Messages : 506
    Points : 131
    Points
    131
    Par défaut
    Bien entendu, je vais arrêter ces récriminations lassantes et inutiles.

    Cependant, au cours de cette discussion, il m'a plusieurs fois été répondu des choses du genre "tu dois abandonner tes idées sur Excel", ou d'autres du même ordre : je ne crois pas que ce soit juste de répondre comme ça à quelqu'un qui vient ici demander de l'aide car il ne parvient pas à réaliser ce qu'il désire. Les bénévoles qui se donnent le mal d'essayer de comprendre ce qui pose problème aux autres peuvent comprendre le problème ou non, peuvent être capable d'y répondre ou non, évidemment, mais se permettre de dire qu'il n'est pas légitime de désirer faire ceci ou cela, c'est complètement différent, et totalement hors de propos dans ce cadre.

    Et, pour mon problème, je pense avoir assez montré que j'étais loin de maitriser tous les aspects de HTML/CSS, mais j'ai quand-meme beaucoup cherché, j'ai parfois trouvé des questions très proches, mais jamais de solution.

    Et ce lien, proposé tout à fait à propos par un intervenant ici même :http://www.developpez.net/forums/d23...-colonne-fixe/

    (qui date d'une dizaine d'années) le pose exactement, et ne le résout qu'en partie.

    Alors; s'il,vous plait, tous, arrêtez de me donner des leçons de recherche ou de morale WEB : résolvez le problème, et montrez au monde comment vous faites.

    Et à ce moment là, tout le monde - et moi compris - sera content.

    AMIcalement.

  17. #17
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    • non seulement tu interprètes de travers* tout ce qu'on t'écrit / te conseille,
    • mais en plus, jusqu'ici, tu ne fais que brasser du vent...


    On n'a pas encore vu UNE SEULE ligne de TON code !!

    Tu n'as manifestement pas compris COMMENT fonctionne le forum (Les règles du club, notamment les sections "III-C. Message clair et précis" et "IV-H. Pourquoi personne ne répond ?") :
    • on est là pour CORRIGER et CONSEILLER.
    • PAS pour écrire le code à ta place.


    DONC :
    • MONTRE le code que TU as écrit (et/ou les corrections que TU as apportées au script du lien donné plus haut)
    • Pose UNE question A LA FOIS, claire et précise.
    • (éventuellement) Montre une copie d'écran / un dessin...


    Merci.


    * ex.
    Je n'ai jamais écrit : "tu dois abandonner tes idées sur Excel"
    Mais : "il te faut "oublier" le mode de fonctionnement d'Excel"

  18. #18
    Membre habitué
    Inscrit en
    Mai 2009
    Messages
    506
    Détails du profil
    Informations forums :
    Inscription : Mai 2009
    Messages : 506
    Points : 131
    Points
    131
    Par défaut
    Citation Envoyé par jreaux62 Voir le message
    Je n'ai jamais écrit : "tu dois abandonner tes idées sur Excel"
    Mais : "il te faut "oublier" le mode de fonctionnement d'Excel"
    Je te demande pardon. Je ne sais pas ce que tu entends par "le mode de fonctionnement d'Excel". Si tu parles de la façon dont il est programmé, en effet, ça ne m'intéresse pas. Si tu parles de la fonction "figer les volets", alors là, non, non et non, il n'est pas question que je l'oublie. Et toute déplacée que soit l'expression de ma colère ici, elle est juste. Quelle raison pourrait-on invoquer pour justifier qu'une certaine fonction (au demeurant plutôt banale) ne soit pas réalisable avec les navigateurs Internet ?

    Puisque vous coulez du code, voici ce que j'ai fait à partir de l'exemple de dix ans :

    Le CSS d'abord:
    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
    * {
      -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
              box-sizing: border-box;
    }/* */
    #general{	position: absolute;	overflow: hidden;	width: 80%;	height:80%;
    					border: 1px solid;}
     
    #titre{	position: absolute;	left: 0px;	top: 0px;	height: 10%;	width:10%;
    				background-color: #9CC;	z-index:100; }
     
    #entete{ position: absolute;	left: 10%;	top: 0px;	height: 10%; width: 90%;
    					background-color: #6CC;	z-index:10;overflow-X:hidden;overflow-Y:scroll;}
     
    #first_col { position: absolute;	top: 10%;	left: 0px;	width: 10%; height: 90%;
    							background-color: #CCF;overflow-X:scroll; overflow-Y:hidden;}
     
    #the_table { position: absolute;	top: 10%;	left: 10%; width: 90%; height: 90%;
    						background-color: #99C;	z-index:10;	overflow: scroll;}
     
    table	{table-layout:fixed; border:0px;padding:0px;margin:0px;}
     
    td {width:6rem; max-width:6rem; min-width:6rem; border:1px solid #000;padding:0px;margin:0px;}
    tr {height:2rem;}
     
    #first-col td, #titre td{width:5rem; max-width:5rem; min-width:5rem;}
    Puis le code "à ma sauce" :
    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
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    <html style='font-size:14px;'>
    	<head>
    	<title>Page d'accueil</title>
    	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    	<meta name="viewport" content="width=device-width">
    	<meta name="viewport" content="initial-scale=1.0">
    	<link rel="stylesheet" href="Test0.css" type="text/css">
    	</head>
    	<body>
    <script type="text/javascript">
    	function doOnScroll(mondiv)
    	{
    		document.getElementById("first_col").style.top=(50-mondiv.scrollTop)+"px"
    		document.getElementById("entete").style.left=(100-mondiv.scrollLeft)+"px"
    	}
    </script>
    		<div id="general">
    			<div id="titre">
    				<table>
    					<tr>
    						<td>Titre</td>
    					</tr>
    				</table>
    			</div>
    			<div id="entete">
    				<table>
    					<tr>
    <?php
    $n=20;
    $grec=array("Alpha","Beta","Gamma","Etta","Dzetta","Epsilon","Kappa","Lambda","Mu","Nu");
    foreach($grec as $l) echo("<td>$l</td>");
    ?>
    					</tr>
    				</table>
    			</div>
     
    			<div id="first_col">
    				<table>
    <?php
    for($i=1;$i<$n;$i++)echo("<tr><td>Ligne $i</td></tr>");
    ?>
    				</table>
    			</div>
     
    			<div id="the_table" onscroll="doOnScroll(this);">
    				<table>
    <?php
    for ($i=1;$i<$n;$i++)
    {
    	echo("<tr>");
    	foreach($grec as $l)echo("<td>$l-$i</td>");
    	echo("</tr>");
    }
    ?>
    				</table>
    			</div>
    		</div>
    	</body>
    </html>
    Et le résultat :
    Nom : Sans titre.jpg
Affichages : 305
Taille : 225,1 Ko

    Il y a beaucoup à dire. J'aime mieux me taire.

    Merci de quand-même continuer à me lire.

    AMIcalement.

  19. #19
    Invité
    Invité(e)
    Par défaut
    Citation Envoyé par L'AMI Yves Voir le message
    ...Puisque vous coulez du code, ...
    Nous ? Non !!
    Et toi ?

    Citation Envoyé par L'AMI Yves Voir le message
    ...Il y a beaucoup à dire. J'aime mieux me taire....
    Dommage !
    C'est justement maintenant qu'il faut parler !!
    • explication claire (et concise !) du problème ?
    • question précise ? (1 question à la fois : c'est ce qui permet d'avancer, étape par étape...)


    Remarque 1 :
    • le rem sert surtout pour la taille des caractères (font-size, line-height...)
    • pour la dimension largeur/hauteur de "boites" (div, td...) on utilisera plus facilement des % (adaptables) et/ou px (pixels , fixe)


    Remarque 2 :
    • Si tu veux qu'on puisse TESTER ton code, il nous faut le code HTML généré (code source -> "Ctrl"+"U")


    Remarque 3 :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    for($i=1;$i<$n;$i++)echo("<tr><td>Ligne $i</td></tr>");
    ?>
    	...
    			<div id="the_table" ...>
    On ne met JAMAIS un id "invariable" dans une boucle, car un id DOIT être UNIQUE.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    			<div class="the_table" ...>
    OU (ici) par ex. :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    			<div id="the_table_<?php echo $i;?>" class="the_table" ...>
    Dernière modification par Invité ; 20/07/2016 à 15h29.

  20. #20
    Membre habitué
    Inscrit en
    Mai 2009
    Messages
    506
    Détails du profil
    Informations forums :
    Inscription : Mai 2009
    Messages : 506
    Points : 131
    Points
    131
    Par défaut
    Au lieu de parler, j'ai continué à bosser, et (par hasard ?) j'ai résolu le problème. Je vais mettre ma solution ci-dessous, mais avant, une remarque : tu ne dois pas être habitué au PHP (ça n'est pas un reproche, personne n'est obligé de jongler avec le PHP), mais ta remarque
    for($i=1;$i<$n;$i++)echo("<tr><td>Ligne $i</td></tr>");
    ?>
    ...
    <div id="the_table" ...>
    n'est pas juste, car mon instruction for(...) n'est pas suivie d'une accolade ouvrante : dans ce cas, la boucle est constituée de la seule instruction qui suit. Ma boucle "for" ne définit donc qu'une seule ligne du tableau. Et l'id de la table est donc bien unique.

    Mais assez parlé. Ecoutez, le monde : voici la solution :
    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
    * {
      -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
              box-sizing: border-box;
    }/* */
    #general{	position: absolute;	overflow: hidden;	width: 80%;	height:80%;
    					border: 1px solid;}
     
    #titre{	position: absolute;	left: 0px;	top: 0px;	height: 2rem;	width:5rem;
    				background-color: #9CC;	z-index:100; }
     
    #entete{ position: absolute;	left: 5rem;	top: 0px;	height: 2rem; width:54rem;
    					background-color: #6CC;	z-index:10;overflow-X:hidden;overflow-Y:scroll;}
     
    #first_col { position: absolute;	top: 2rem;	left: 0px;	width: 6rem; height:26rem;
    							background-color: #CCF;overflow-X:scroll; overflow-Y:hidden;}
     
    #the_table { position: absolute;	top: 2rem;	left: 5rem;  width:54rem; height:26rem;
    						background-color: #99C;	z-index:10;	overflow: scroll;}
     
    table	{table-layout:fixed; border:0px;padding:0px;margin:0px; border-collapse:collapse}
     
    td {width:6rem; max-width:6rem; min-width:6rem; border:1px solid #000;padding:0px;margin:0px;}
    tr {height:2rem;}
     
    #first_col td, #titre td{width:5rem; max-width:5rem; min-width:5rem;}
    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
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    <html style='font-size:14px;'>
    	<head>
    	<title>Page d'accueil</title>
    	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    	<meta name="viewport" content="width=device-width">
    	<meta name="viewport" content="initial-scale=1.0">
    	<link rel="stylesheet" href="Test0.css" type="text/css">
    	</head>
    	<body>
    <script type="text/javascript">
    	function doOnScroll(mondiv)
    	{
    		document.getElementById("first_col").scrollTop=mondiv.scrollTop;
    		document.getElementById("entete").scrollLeft=mondiv.scrollLeft;
    		ce1.innerHTML=document.getElementById("first_col").scrollTop;
    		ce2.innerHTML=document.getElementById("entete").scrollLeft;
    //    alert(ce1.innerHTML);
    	}
    </script>
    		<div id="general">
    			<div id="titre">
    				<table>
    					<tr>
    						<td>Titre</td>
    					</tr>
    				</table>
    			</div>
    			<div id="entete">
    				<table>
    					<tr>
    <?php
    $n=20;
    $grec=array("Alpha","Beta","Gamma", "Delta","Epsilon","Zeta","Eta","Theta","Iota","Kappa","Lambda",
    						"Mu","Nu","Ksi","Omicron","Pi","Rho","Sigma","Tau","Upsilon","Phi","Khi","Psi","Omega");
    foreach($grec as $l) echo("<td>$l</td>");
    ?>
    					</tr>
    				</table>
    			</div>
     
    			<div id="first_col">
    				<table>
    <?php
    for($i=1;$i<$n;$i++)echo("<tr><td>Ligne $i</td></tr>");
    ?>
    				</table>
    			</div>
     
    			<div id="the_table" onscroll="doOnScroll(this);">
    				<table>
    <?php
    for ($i=1;$i<$n;$i++)
    {
    	echo("<tr>");
    	foreach($grec as $l)echo("<td>$l-$i</td>");
    	echo("</tr>");
    }
    ?>
    				</table>
    			</div>
    		</div>
    <script>
    var iniv=document.getElementById("first_col").scrollTop;
    var inih=document.getElementById("entete").scrollLeft;
    var tab=document.getElementById("the_table");
    var col=tab.getElementsByTagName("tr")[7];
    var ce1=col.getElementsByTagName("td")[7];
    var ce2=col.getElementsByTagName("td")[8];
    ce1.style.color="#ffffff";
    ce2.style.color="#ffffff";
    //alert(ce1.innerHTML);
    </script>
    	</body>
    </html>
    L'image ne veut pas venir : error 2038. Désolé.

    AMIcalement

Discussions similaires

  1. [AC-2003] Figer les colonnes d'une table
    Par lex89 dans le forum VBA Access
    Réponses: 4
    Dernier message: 13/06/2012, 13h49
  2. Figer les colonnes dans un tableau croisé
    Par beaucourt claudine dans le forum Webi
    Réponses: 1
    Dernier message: 25/08/2011, 16h25
  3. [AC-2003] Comment de-figer les colonnes d'une feuille de donnees
    Par SSJconsult dans le forum IHM
    Réponses: 2
    Dernier message: 08/06/2010, 08h14
  4. Liste alv figer les colonnes
    Par kitty2006 dans le forum SAP
    Réponses: 4
    Dernier message: 29/08/2007, 18h13
  5. Les doubles quotes dans les fprintf
    Par Changedman dans le forum C
    Réponses: 30
    Dernier message: 22/02/2007, 12h07

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