Table scrollable avec colonne fixe

**NoSmoking** · 25/04/2020, 16h36

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 ...
Nom : table-scrollable.png
Affichages : 410
Taille : 18,3 Ko

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