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"