Discussion :

[L'AMI Yves]

Bonsoir tout le monde.

Je m'arrache les cheveux depuis des jours ! Il me semble pourtant que ce que je veux faire est absolument naturel : je veux placer un tableau dans une <div> de telle sorte qu'il ait un <caption> (éventuellement), une (ou deux ?) <tr> contenant des <th> , puis sont contenu, avec des <tr><td>... Jusque là, tout le monde - et moi - sait faire.

Là où je bloque, c'est dans le cas de grands tableaux, qui débordent. Il apparait un ascenseur, et si l'on veut descendre, le <caption> et les <tr><th> disparaissent.

J'ai essayé de mettre ces derniers dans une <div> différente, alors il ne disparaissent plus, mais l'alignement des colonnes devient impossible, car la largeur occupée par les <tr><td> varie suivant qu'il y a ascenseur ou non.

Quelqu'un s'est-il déjà attaqué à ce problème ?

Merci d'avance.

AMIcalement.

[NoSmoking]

Bonjour,

Quelqu'un s'est-il déjà attaqué à ce problème ?

Oui, voir : Table scrollable avec colonne fixe

[L'AMI Yves]

Ah ! Formidable ! J'essaie tout de suite.

Bémol : j'utilise Firefox, et le lien dans le message que tu donnes est mort...

A suivre.

MERCI.

AMIcalement.

[NoSmoking]

Bémol : j'utilise Firefox, et le lien dans le message que tu donnes est mort...

effectivement , celui de la page de test avait été mis à jour en son temps, je viens de mettre à jour celui de la discussion, mais quoiqu'il arrive ce n'est plus réellement d'actualité FireFox ayant fait des efforts.

[L'AMI Yves]

Est-ce cela qui ne va pas avec Firefox : voici un extrait du "code source de la page" livré par Firefox :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
   <div class='colonne22 cellule avec-table'>
      <div>
        <table class='espion'>
          <thead>
            <caption>Espion</caption>
            <tr><th>H.</th><th>Ext</th><th>Amb</th>
                <th>Pr</th><th>H</th><th>Et</th><th>O</th></tr>
          </thead>
 
          <tbody>         
<tr>

Ce qui correspond exactement à ce que j'attendais. Mais ça ne fait pas ce que j'avais espéré : le "caption" et les en-tête de colonnes défilent avec l'ascenseur.

Et l'inspecteur, quand le je place là, liste plus ou moins les éléments de mon tableau, mais mélangés. Si je déplace à la main (dans la fenêtre de l'inspecteur) les différentes lignes <thead>,<caption> etc, le contenu de la page est bien celui attendu, mais le scroll masque le thead (tout ce qui n'appartient pas à "<tbody" a "z-index: 2", et <tbody>, "z-index:1", à ce que dit l'inspecteur !).

Je n'ai bientôt plus de cheveux !

AMIcalement.

[NoSmoking]

Est-ce cela qui ne va pas avec Firefox :

non tout va bien avec FireFox maintenant, il signalait un soucis pouvant existé compte tenu de la méthode de synchronisation utilisée ce qui n'est plus le cas.

Ton soucis vient du fait que tu ajoutes un élément, ici un <caption> qui doit également être en position:sticky pour que l'effet soit préservé.

Au passage, je ne vois pas de quel code fourni par FF tu parles ?!

Donc pour en revenir à la mise en oeuvre, soit le HTML, partiel, suivant :

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
<div class="table-conteneur">
  <table class="table-scrollable">
    <caption>Titre du tableau</caption>
    <thead>
      <tr>
        <th>Prénom</th>
        <th>Nom</th>
        <th>Date</th>
        <th>Entreprise</th>
        <th>Fonction</th>
        <th>Adresse</th>
      </tr>
    </thead>
    <tbody>
        <!-- les données -->
    </tbody>
  </table>
</div>

Il faut donc tenir compte du nouvel élément et le coller en début de <table>.

On va commencer par définir, grâce aux variables CSS, des données réutilisées dans le style pour ce facilité la tâche.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
.table-scrollable {
  --line-caption: 3;                                    /*-- pour centrage vertical --*/
  --height-caption: calc(var(--line-caption) * 1em);    /*-- pour les éléments qui vont suivrent --*/
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  empty-cells: hide;
  background-color: #EFEFEF;
}

Le CSS du <caption> :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
caption {
  z-index: 3;                         /*-- même niveau que l'entête --*/
  position: sticky;
  top: 0;                             /*-- collage en 0 --*/
  height: var(--height-caption);      /*-- hauteur et centrage vertical --*/
  line-height: var(--line-caption);
  background: #DEF;                   /*-- à adapter mais nécessaire --*/
}

Maintenant il reste à réajuster, la position top en fait, les autres éléments en position:sticky :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
thead tr:first-child th:first-child {
  z-index: 3;
  position: sticky;
  top: var(--height-caption);         /*-- réajustement position du top --*/
  left: 0;
}
thead tr:first-child th {
  z-index: 2;
  position: sticky;
  top: var(--height-caption);         /*-- réajustement position du top --*/
}

Voilà ce doit être tout

[L'AMI Yves]

Merci de m'aider, ça remonte le moral...


Eh bien pour tout dire, oui, je suis déçu... par ce que je n'arrive pas à ce que ça marche chez moi ! Bien sûr, ma page est un peu plus compliquée, ça vient peut-être de là : d'abord, j'ai une structure de grid à deux grid-row et trois grid-column. Chaque cellule commence par une <div> en position "relative" et display: inline-grid. Est-ce que c'est ça qui casse tout ????

Ensuite, dans l'une de ces cellules, je désire placer mon tableau, dans une div en position absolute et tout et tout... Quand la page s'ouvre, tout a l'air bien, comme je voulais, avec la table qui a son ascenseur. Mais l'ascenseur est tout le long de la <div> (donc englobant le <thead>), et quand je scrolle, je perds le <thead>.

Il faut bien dire que je vole nettement au dessus de mon niveau en HTML/CSS, mais tout me semble correct. Si vous avez besoin de code...

AMIcalement.

PS Quand je parlais du code fourni par Firefox, c'est le contenu de la page qui s'ouvre quand le clique du bouton droit sur ma page, et que je demande "Code source de la page"

[NoSmoking]

Eh bien pour tout dire, oui, je suis déçu... par ce que je n'arrive pas à ce que ça marche chez moi !

il n'y a aucune raison que cela ne fonctionne pas sauf si tu as une structure HTML et/ou du CSS déficient

Montre nous une page ou la structure HTML et le CSS que tu appliques, je dirais qu'il te manque quelque chose.

As-tu bien appliqué ce que j'ai mentionné dans mon post #6 ?

[L'AMI Yves]

@NoSmoking : Excuse-moi du délai, j'étais sur un autre truc plus urgent.

Oui, je crois avoir à peu près respecté ce que tu as écrit, en prenant quelques libertés : je ne suis pas parti à faire faire des calculs à CSS, j'ai fixé les hauteurs de ligne : peut-être qu'elles bougeront un peu au scroll, mais elles ne devraient pas disparaître. Par contre, ça ne marche en effet pas : est-ce par ce que j'ai une <div> de plus que toi (les <div> qui définissent la structure de grid de ma page), et elle est définie en {position : relative;}, alors qu'à l'intérieur de cette <div>, la <table.container> est bien en {position: absolute;}. Je ne sais pas si c'est cohérent, en CSS d'avoir un "absolute" à l'intérieur d'un "relative", mais, dans ma logique, ça ne devrait pas être incompatible...

Merci de ta patience.

AMIcalement.

[L'AMI Yves]

J'ai beaucoup amélioré la situation : j'ai abandonné le concept de grille, j'ai divisé mon écran en six <div> en leur assignant des positions absolute et, dans l'une d'elles, j'ai placé ma table : voici les codes :
HTML :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
    <div class='colonne22 cellule avec-table'>
        <table class='espion'>
          <caption>Espion</caption>
          <thead>
            <tr><th>H.</th><th>Ext</th><th>Amb</th>
                <th>Pr</th><th>H</th><th>Et</th><th>O</th></tr>
          </thead>

Le reste étant généréé par php, sous forme <tbody><tr><td>...
CSS :

Code CSS :

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
div.espion           {position : absolute;}
table.espion caption {position: sticky; top: 0; line-height: 15px; z-index: 2;
                        background-color: white;border: 1px solid black}
table.espion thead   {position: sticky; top: 15px; left: 0; z-index: 2;
                        background-color : white;border: 1px solid black}
table.espion thead tr      {position: sticky; top: 15px; left: 0; z-index: 2;
                        background-color: white;border: 1px solid black}
table.espion th      {position: sticky; top: 15px; left: 0; z-index: 2;
                        background-color: white;border: 1px solid black}
/*table.espion thead tr {position: sticky; top: 10px; z-index: 2}*/
table.espion tbody   {position: sticky; top: 25px; left: 0; z-index: 1;
                        background-color: white;border: 1px solid black}
table.espion tbody tr:first-child {top:25px;}
table.espion tbody tr       {z-index: 1;}
table.espion tbody th       {width: 40px !important;}
table.espion tbody td       {width: 40px !important;}

Je ne sais pas comment montrer le résultat, mais il est facile à décrire : le caption est en haut, dans un cadre. Le th est juste en dessous, sans bordures, puis suit la table, avec bordures. Et le scroll de la table provoque la disparition de la ligne entre le caption et le thead", et le remontée de ce qui est en dessous d'une hauteur équivalente (soit environ 1 pixel).

C'est beaucoup mieux, mais ça n'est pas encore ça, et je n'y comprends rien.

AMIcalement.

[NoSmoking]

Oui, je crois avoir à peu près respecté ce que tu as écrit,

Pourquoi à peu près !!!!!!

en prenant quelques libertés

Dans ce cas il ne sert à rien que je continu cette discussion

Quelques remarques avant

• Il manque la class"table-conteneur" sur le conteneur de la <table>
• Il manque la class"table-scrollbar" sur la <table>
• Pourquoi avoir ajouté une règle avec comme sélecteur thead tr ?

Repart de ce que j'ai écris en utilisant le CSS que j'ai indiqué sans modifications, il sera temps après d'appliquer ton CSS en ajoutant par exemple le cosmétique via un classe.

Je ne sais pas si c'est cohérent, en CSS d'avoir un "absolute" à l'intérieur d'un "relative", mais, dans ma logique, ça ne devrait pas être incompatible...

l'élément parent positionné, ici enposition: relative, sert de référent à l'élément enfant positionné en position: absolute, donc c'est on ne peut plus cohérent.

Merci de ta patience..

Elle risque d'avoir des limites si tu ne procèdes pas méthodiquement.

[L'AMI Yves]

Je n'ai aucune intension d'abuser de ta patience, je me suis efforcé d'adapter ce que j'avais compris à la situation de mon code à l'époque. Depuis, j'ai éliminé la structure de grille et ça va mieux, mais il reste un "petit truc".

Parmi les (petites) libertés que j'ai prises, il y a celle de changer le nom des classes : j'ai changé les noms de classe en "avec-table" et "avec-asc", mais je m'aperçois que je ne les ai pas listés dans mon message :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.avec-table { overflow: auto; }
.avec-asc {  overflow: auto; top : 40px;}
 
.avec-table table {width: 100%;}

Je vais reprendre tout ça très attentivement, mais je me suis longuement battu hier contre le fait que l'ascenseur fasse bien monter la table, mais de telle façon qu'elle se superpose avec le titre et l'en-tête. En relisant l'article que tu cites dans ton premier message, j'ai vu qu'il fallait bien penser à ajouter un background-color, je l'ai fait, et la superposition a disparu. Mais le quadrillage du tableau aussi. Je ne comprends pas comment ça se fait.

Je me permets de souligner que les background-color manquent dans tes exemples.

Allez, encore un peu de patience...

AMIcalement.

[L'AMI Yves]

Ah ! Malheur ! Qu'ai-je dit là ?!!! Oui, les color/background-color y sont bel et bien (juste, elles ne sont pas blanches). Je fais amende honorable. Ne perds surtout pas patience.

[L'AMI Yves]

Bonjour No Smoking. Il semble que tu aies bel et bien perdu patience. Je le regrette. Tu as pris la mouche par ce que j'ai suivi "à peu près" tes indications, mais il n'y a pas de raison de s'offusquer : j'ai essayé, avec toute la rigueur dont je suis capable (c'est certes un limite importante), de transposer dans mon contexte ce que j'ai compris de tes explications. Je suis loin de maîtriser le développement Web, mais je crois savoir comprendre les implications de mes actes : tu as placé dans tes exemples une notion que je ne connaissais pas : les variables et les calculs en CSS. Je ne les ai pas repris, me contentant de mettre des valeurs fixes : où est l'offense ? Il y a d'autres points sur lesquels je suis passé trop vite. Bon, je crois que j'ai corrigé.

Mais dis-moi : même sans me donner la solution, peux-tu affirmer que ce qui ne marche pas chez moi (disparition du quadrillage du tableau quand on scrolle) provient d'une chose que tu m'as indiquée et que je n'ai pas faite ?

AMIcalement.

[L'AMI Yves]

Je m'excuse auprès de toute la communauté pour tout ce que j'ai pu dire qui ai fâché quelqu'un. Mais j'espère que l'on me pardonnera de ne pas toujours maitriser mon agacement devant les réaction incompréhensibles (au moins pour moi) de Firefox.

Pour essayer d'avancer sur mon problème de tableaux, je suis reparti sur une feuille quasi blanche, avec les fichiers ci-dessous :

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
<?php
?>
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>L'Espérance</title>
    <link href="RPi.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <div class='colonne11 cellule'></div>
    <div class='colonne12 cellule'></div>
    <div class='colonne21'>
       <iframe src="horloge.svg">
          </iframe>
    </div>
    <div class='colonne22 cellule'></div>
    <div class='colonne31 cellule'></div>
    <div class='colonne32 cellule'></div>
  </body>
</html>

Code CSS :

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
html {padding: 1px; background-color: white;
    font-family: Verdana, sans-serif; font-size: 10pt; text-align: center;}
 
body {margin: 0; }
 
.colonne11 { position: absolute; left: 0;   width : 37%; top:0;   height: 50%;} 
.colonne12 { position: absolute; left: 0;   width : 37%; top:50%; height: 49%;} 
.colonne21 { position: absolute; left: 37%; width : 26%; top:0  ; height: 50%;}
.colonne22 { position: absolute; left: 37%; width : 26%; top:50%; height: 49%} 
.colonne31 { position: absolute; left: 63%; width : 36%; top:0  ; height: 50%;} 
.colonne32 { position: absolute; left: 63%; width : 36%; top:50%; height: 49%;} 
.cellule   { overflow: hidden;  margin: 0px; padding: 0px; text-align: center;
    border:1px solid red; }
.avec-table table {width: 90%;}
.avec-asc { /* overflow: auto;*/ top : 40px;}
 
table {border-collapse: collapse; border: 1px solid black;
        background: white;}
 
caption {z-index: 3; position: sticky; background: white;}
 
.centre {justify-content : center;}
.haut   {vertical-align : top;}

Code xml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg"
     baseProfile="full">
     width="280px" height="280px">
</svg>

Je ne sais pas comment vous montrer l'écran qui apparait, mais il est fait de six rectangles blancs aux bordures rouges, ceux de gauche touchent le bord gauche de l'écran, ceux de droite laissent une toute petite bande blanche, et celui du milieu en haut contient un cadre rectangulaire noir, qui touche le bord supérieur, qui est un peu moins large que son cadre rouge, et qui n'occupe qu'environ la moitié de la hauteur de ce cadre rouge. La bordure rouge de ce cadre-ci a disparu. En pixels, les dimensions du cadre rouge incriminé sont 330 de large et 260 de haut. Celles de la fenêtre noire : 300 par 150
Merci de me donner une explication compréhensible de ceci.

AMIalement.

[NoSmoking]

Parmi les (petites) libertés que j'ai prises, il y a celle de changer le nom des classes

Si il n'y avait que cela rien de grave mais personnellement je parlerais d'un refonte, tu ne t'as pas libéré mais émancipé

Il semble que tu aies bel et bien perdu patience. Je le regrette.

Non, mais difficile pour moi de te faire des réponses plus simples, d’autant que dans la source citée j'ai pris la peine de séparer ce qui rendait la table scrollable de ce qui relevait du cosmétique pur !

j'ai essayé, avec toute la rigueur dont je suis capable (c'est certes un limite importante), de transposer dans mon contexte ce que j'ai compris de tes explications.

dans ce cas il ne faut pas transposer mais appliquer, je dirais bêtement, c'est ce que je fais lorsque je veux explorer une source intéressante, avant de l'adapter à son besoin éventuel

tu as placé dans tes exemples une notion que je ne connaissais pas : les variables et les calculs en CSS., me contentant de mettre des valeurs fixes : où est l'offense ?

c'est le CSS « moderne », il est important de suivre cette évolution qui simplifie grandement la maintenance du CSS. La plupart du temps je reste volontairement basique lors des réponses sur le forum.

Mais dis-moi : même sans me donner la solution, peux-tu affirmer que ce qui ne marche pas chez moi (disparition du quadrillage du tableau quand on scrolle) provient d'une chose que tu m'as indiquée et que je n'ai pas faite ?

Réponse laconique OUI !

Je te mets ci-dessous une version du CSS qui devrait te permettre d'avancer.

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
/*-- Le conteneur DOIT être dimensionné --*/
.avec-table {
  width: 40em;            /* pour test à ajuster */
  height: 25em;           /* pour test à ajuster */
  overflow: auto;  
}
table.espion {
  border-spacing: 0;
  width: 100%;
}
table.espion caption {
  z-index: 2;             /* doit être supérieur à celui de TD */
  position: sticky;
  top: 0;
  border: 1px solid #000;
  line-height: 25px;
  background-color: #FFD;
}
/* ne rien mettre sur le THEAD, c'est géré par les TH */
table.espion thead {
  /* z-index: 2; */
  /* position: sticky; */
  /* top: 17px; */
  /* left: 0; */
  /* border: 1px solid #000; */
  /* background-color: #FFF; */
}
table.espion th {
  z-index: 2;
  position: sticky;
  top: 27px;                  /* il faut tenir compte des border */
  left: 0;
  border: 1px solid #00F;
  background-color: #DEF;
}
/* 1st si scroll horizontal */
table.espion thead tr:first-child th:first-child {
  z-index: 3;               /* imperatif */
/*  position: sticky;       /* facultatif */
/*  top: 17px;              /* facultatif */
/*  left: 0;                /* facultatif */
}
 
table.espion tbody {
/*  z-index: 1;               /* ne sert à rien */
/*  position: sticky;         /* ne sert à rien */
/*  top: 25px;                /* ne sert à rien */
/*  left: 0;                  /* ne sert à rien */      
/*  border: 1px solid #000;   /* ne sert à rien */
  background-color: #FDE;
}
table.espion tbody td:first-child {
  z-index: 1;
  position: sticky;
  left: 0;
  background-color: #efd;
}

J'ai laissé des background-color pour voir où se situent les zones, il est préférable de ne pas mettre de blanc comme fond. Je te laisse analyser.

A ce stade les bordures sur les cellules, <td>, ne sont pas prises en compte car non déclarées.


Ressources :

Pour infos, je joins comment sont superposés les calques dans un élément <table> :


et la page dont elle est issue sur w3.org c'est plein de bonne informations !

• Table layers and transparency

A toi de jouer

[L'AMI Yves]

Merci d'être revenu, merci d'avoir redit et encore redit : ça marche sur ma version de test. Je vais maintenant retourner à l'opérationnel, et ça va marcher aussi.

Encore merci.

AMIcalement.

[NoSmoking]

Merci d'être revenu, ...

pour revenir il faut être parti ce qui n'était pas le cas mais ils nous arrivent d'avoir autre chose à faire qu'apporter des réponses sur le forum et qui plus est des réponses qui sont parfois longues à rédiger et souvent pas aussi complètes que l'on le souhaiterait.

Nota : D'ailleurs ma dernière réponse ne traite pas de ton post #15, celui-ci devrait faire l'objet d'une nouvelle discussion pour plus de clarté, on n'est plus dans la même problématique.

Bonne continuation