[Résolu] Fixer des colonnes d'une <table>

Salut

Gros problème de conception pour moi.

J'ai fais une <table> dans une <div>

https://codepen.io/JUSEN/pen/dybWRpK

La table est affreuse, mais l'algo est tellement gros derrière (car la table est construite en PHP) que c'est très compliqué de le changer. il faudrait tout refaire mais le client n'a pas le bugdet.

Du coup avec l'existant, est il possible de FIXER les X première colonnes du tbody ? du genre à avoir les dates de visibles même si je scroll avec le scroll horizontale de la div parente ? ou dois-je changer le scroll de place pour le mettre dans le tbody, ou autre chose.

Ce que je cherche est fixer les colonnes pour avoir la DATE de visible même à l'autre bout du tableau.

Merci à vous.

Bonjour,

tu peut te servir de position:sticky
exemple a partir de ton codepen : https://codepen.io/gc-nomade/pen/Rwbgbpg

table {
  width: auto !important; /* retirer la largeur   ou revoir le poids du selecteur */
}
tbody tr :nth-child(5),
tbody tr :nth-child(6) {
  position: sticky !important; /* ou revoir le poids du selecteur */
  left: 0em;
  z-index: 1;
  background: white;
}
tbody tr :nth-child(6) {
  left: 6em;
}

Pour les navigateurs qui ne comprenne pas tu peux ne rien faire ou te servir d'un polyfill.
Modifié par gcyrillus (28 Aug 2019 - 16:13)