Thead fixe et responsive

[Latiatcha]

Bonjour,

Nous travaillons avec de très grands tableaux en scroll infinie.
Le soucis rencontré, on ne voit plus le header du tableau. Il y a effectivement la pagination qui pallie à ce problème mais avec des milliers de données cela ne correspond pas aux utilisateurs.
Nous avons souvent besoin de fixer le header et que le tableau reste responsive sous tablette et mobile.

Screenshot des tableaux que nous pouvons avoir :

Merci,

[diyfr]

Tu as essayé cette solution ?

.table-fixed thead {
  width: 97%;
}
.table-fixed tbody {
  height: 230px; /* A adapter en fonction de tes besoins*/
  overflow-y: auto;
  width: 100%;
}
.table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th {
  display: block;
}
.table-fixed tbody td, .table-fixed thead > tr> th {
  float: left;
  border-bottom-width: 0;
}

 <table class="table table-fixed">

[nicolaswurtz]

On va voir pour intégrer ça rapidement, merci @diyfr pour la suggestion ;)

[nicolaswurtz]

Voir si JoliCode peut traiter ça.

[vdesdoigts]

La solution proposé ci-dessus apporte son lots de problème.
Le thead et ses cellules ne sont plus dans le "flow" du tableau, du coup leur taille n'est plus identique au contenu du tableau.

Dans ce cas il faut donner une taille fixe à chaque colonne, c'est donc contextuel.

Une autre solution envisageable est de recourir à la position sticky, mais le container du table doit avoir une taille fixe. C'est géré comme pour le header, à voir si il y a des autres cas plus spécifiques.

[nicolaswurtz]

Ajouté et mergé à dev, merci @vdesdoigts ! Je vais voir pour ajouter de la doc concernant l'usage du thead fixe dans le component content/table.