18041 sujets

Questions générales et questions de débutants

[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.
une piste :
https://jsfiddle.net/zinoui/BmLpV/
j'ai trouvé en cherchant "css table fixed column scroll", il y a d'autres liens intéressants, le principe semble être de mettre les colonnes à figer en position absolute, ce qui n'est pas tout à fait la solution quand ce ne sont pas les premières colonnes

sujet intéressant, je suis curieux de voir la solution
Modérateur
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)
Salut

Alors déjà, merci à tous les deux vraiment, car vos deux solution sont très efficaces.

Après différents tests j'ai opté pour la solution de Gcyrillus car un peu plus simple à mettre en place pour moi si plusieurs tableau/colonnes sans impacter le reste de mon CSS.

Merci à vous !
Sujet clos
Aller à