Fixer la premiere colonne d'un tableau

Support Mise en page
#1

Bonjour j’essaie, en css, de fixer la première colonne du tableau (en bas de cette page) lors du scroll horizontal.
A moitié réussi, je n’arrive pas à fixer l’en-tête ça me désespère !

Le code utilisé :

/ Fixer la première colonne (corps) /
.dataTables_scrollBody td:first-child {
    position: sticky;
    left: 0;
    background-color: #fff;
    z-index: 2;
}

/ Éviter que la première colonne de l'en-tête ne soit aussi fixe /
.dataTables_scrollHead th:first-child {
    position: static;
}


/ Assurer que l'en-tête reste toujours au-dessus /
.dataTables_scrollHead td:first-child {
    position: sticky;
    left: 0 !important;
    z-index: 3; 
    background-color: #fff;
}


/ Assurer que la première colonne a la même largeur dans le head et le body /
.dataTables_scrollHead th:first-child,
.dataTables_scrollBody td:first-child {
    min-width: 120px;
    max-width: 120px;
}

Qu’est-ce qu’il manque ou est en trop dans ce code ? Est-ce que ça interfère avec une autre ligne css ailleurs ?
Merci du coup de main

#2

Ca a l’air de fonctionner, bravo, c’était un beau challenge

#3

Merci ! Mais comme je dis plus haut, l’en-tête n’est pas fixée et je souhaite la fixer aussi.

#4

Tu veux dire l’entete de la 1ere colonne ? le libellé « Structure membres » ?
Tu chipotes un peu là quand même, non ?

#5

:rofl: mais ! Je veux faire proprement ! Je pense que le client me le fera remarquer sinon. Pis de toute façon c’est pas la question : tu as une réponse à cette requête ou pas ? :joy:

#6

non j’ai pas la réponse

1 « J'aime »
#7

maybe cibler le premier élément

.table > thead > tr > th:first-child {
  position: sticky !important;
  left: 0px;
  min-width: 120px;
  background: white;
  z-index: 3;
}