Scrolling dans un tableau

Bonjour,
Je débute en HTML(5) et je cherche à afficher un tableau dont les dimensions dépasseront celles de l'affichage ce qui va entraîner des possibilités de scrolling tant horizontal que vertical.
Jusque-là ce n'est pas compliqué, les barres de scrolling apparaissent automatiquement lorsque c'est nécessaire.
Mais je voudrais que la première ligne et la première colonne du tableau restent affichées et 'synchronisées' lorsqu'on scrolle le tableau en s'éloignant de l'angle en haut à gauche. C'est comme le principe des volets dans Excel.
Je pensais qu'en utilisant les balises <th> cela réaliserait ce que je cherche mais ce n'est pas le cas.
Pourriez-vous me donner une piste (je ne demande pas qu'on m'écrive le code...) pour obtenir l'effet que je recherche ?
Merci.
Pascal.

Il existe une règle, que je n'ai jamais utilisé sur un tableau mais qui effectivement doit être intéressante dans ce cas :
p

osition: sticky;

Exemple (mais pas pour un tableau)

Pour ma part
Mon <tbody> est en display: block; ce qui fait que ma ligne <th> reste quand je scroll et mes <tr> en display: table;

par contre problème ! car le display block dissocié le body du tableau. Les colonnes ne sont plus alignés avec les data.... donc j'ai du trafiquer le tout en css pour simuler une symétrie colonne/ligne.


Je viens de tester la position sticky sur mon thead.. cela n'a pas l'air de fonctionné.
Modifié par JENCAL (02 Oct 2018 - 11:00)

@Jencal : je me penchais justement sur ce problème.

En effet, la position sticky n'est pas simple à implémenter sur un tableau (cf. par exemple Stackoverflow). On ne peut pas cibler tr avec cette règle (sous Chrome tout au moins).

Voici une proposition de contournement en ciblant les th : CodePen
Modifié par Olivier C (02 Oct 2018 - 11:15)

Hello les gars,

Je travaille par à-coups sur une table qui permet le sticky (h/v), redimensionnement de columns, et autres. Je partage l'état actuel et vous aurez certainement des bonnes idées d'améliorations. J'ai utilisé Jquery/Bootstrap pcq c'était déjà dans le projet mais feel free pour les adaptations.

Tout commentaire est bon à prendre !

ps : si quelqu'un a une idée pour améliorer les saccades lors du scroll, ce serait tip top !