Discussion :

[NoSmoking]

Et si on oubliait un peu le JavaScript et que l'on adoptait le positionnement sticky pour rendre nos <table> scrollables, bon pour le coup on oublie également IE.

La réalisation d'une <table> scrollable en devient des plus rudimentaire.

Aperçu

Cela n'est pas forcément parlant mais bon ...

Structure HTML

La structure utilisée est on ne peut plus standard, il nous faut simplement mettre un conteneur à la <table> pour obliger celle-ci à scroller.

Code html :

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

1
2
3
4
5
6
7
8
9
10
<div class="table-conteneur">
  <table class="table-scrollable">
    <thead>
      <!-- le contenu de l'entête -->
    </thead>
    <tbody>
      <!-- le contenu de la table -->
    </tbody>
  </table>
</div>

CSS pour effet de scroll

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
tbody td:first-child {
  z-index: 1;
  position: sticky;
  left: 0;
}
thead tr:first-child th {
  z-index: 2;
  position: sticky;
  top: 0;
}
thead tr:first-child th:first-child {
  z-index: 3;
  position: sticky;
  top: 0;
  left: 0;
}

C'est surtout la valeur des z-index, l'empilement donc, qui est importante.

Il faut penser à mettre une couleur de fond sur les éléments en position sticky pour qu'ils restent proprement visibles.

Le reste du CSS n'est que cosmétique.

Voilà c'est terminé, pas trop déçu ?

Désagréments

• FireFox peut peiner lors du suivi des scrolls, voir Effets liés au défilement sur MDN (web.archive..org) (*)  ;
• et sûrement d'autres.

Ressources

• Propriété CSS position sur MDN ;
• Compatibilité position:sticky sur caniuse.com.

Voir l'exemple en ligne : Table scrollable avec colonne fixe


(*) plus vraiment d'actualité

[Dave Hiock]

Voilà c'est terminé, pas trop déçu ?

quand le CSS devient simple cela se résume en peu de ligne, dommage que Explorer n'ait pas implémenter le positionnement sticky car il reste encore bien utilisé même si il se meurt.

Bon il reste le javascipt pour cela !

Merci.

[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

Pour la clarté je reste sur la discussion initiale : Mise en page de tableau avec ascenseur