28106 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai un problème avec Google Chrome. En effet, j'ai créé un tableau qui est assez long et par conséquent j'ai mis une barre de navigation horizontale sur celui-ci. Je voulais faire en sorte que la première colonne de mon tableau soit toujours visible, et pour cela j'ai utilisé Position: Sticky.

Sur Firefox et sur Safari, aucun problème, cela marche nickel.

Mais sur google chrome, la colonne reste fixe jusqu'à ce qu'on décale plus loin que ce qui est affiché lors du chargement de la page. Je ne sais pas si c'est très clair mais avec des images cela le sera probablement +.

On peut voir que lorsqu'on charge la page, on voit le tableau jusqu'au 27/01/22 (photo 1)
Lorsqu'on commence à naviguer dans le tableau, la colonne reste fixe comme souhaité (photo 2)
Mais dès lors qu'on dépasse le 27/01/22, la colonne n'est plus fixe et bouge avec le tableau (Photo 3)

upload/1645535215-84247-capturedancran2022-02-22no13..png
upload/1645535291-84247-capturedancran2022-02-22no13..png
upload/1645535304-84247-capturedancran2022-02-22no13..png

J'ai ce problème uniquement avec Google Chrome donc si quelqu'un a une solution pour corriger ce problème, je suis preneur Smiley biggrin

Merci
Modifié par leny0769 (22 Feb 2022 - 14:08)
Modérateur
Salut,

Au delà des images ca serait bien pour nous d'avoir un bout de code. Est-ce que le site est en ligne ? Est-ce que tu as un moyen de le reproduire dans un https://jsfiddle.net par exemple ?
_laurent a écrit :
Salut,

Au delà des images ca serait bien pour nous d'avoir un bout de code. Est-ce que le site est en ligne ? Est-ce que tu as un moyen de le reproduire dans un https://jsfiddle.net par exemple ?


Salut,

J'ai réussi a ajouter les images.
Concernant le code, c'est sur un ERP pour mon travail, donc c'est un peu compliqué de partager le code, mais concernant le CSS, les balises <td> de la première colonne de mon tableau ont juste en propriété CSS
Position: sticky; 
Left: 0
Modérateur
Je comprends. Par contre je pense qu'il y a un truc dans ton code qui gêne mais impossible pour nous de débuguer à l'aveugle... déjà savoir que c'était un <table> et pas un tableau avec des <div> ça aide Smiley lol

Si je fais un exemple tout basique ca a l'air de bien marcher : https://jsfiddle.net/2bjxqduv/

Du coup est-ce que tu arriverai a refaire un peu le meme tableau que tu as (sans les données, avec juste une ligne, sans trop de style etc) pour reproduire le soucis ?
_laurent a écrit :
Je comprends. Par contre je pense qu'il y a un truc dans ton code qui gêne mais impossible pour nous de débuguer à l'aveugle... déjà savoir que c'était un &lt;table&gt; et pas un tableau avec des &lt;div&gt; ça aide Smiley lol

Si je fais un exemple tout basique ca a l'air de bien marcher : https://jsfiddle.net/2bjxqduv/

Du coup est-ce que tu arriverai a refaire un peu le meme tableau que tu as (sans les données, avec juste une ligne, sans trop de style etc) pour reproduire le soucis ?


Cela sera pas nécéssaire, tu m'as permis de résoudre mon problème Smiley ravi
Je n'avais pas mis la propriété
overflow: auto

Cela marche sur Google Chrome maintenant.

Merci beaucoup
Modérateur
Hahaha alors, cool si ca t'as aidé mais le overflow: auto; ici ne sert a rien (=il n'a pas d'effet, le scrolle st sur le parent). Tu peux le virer de l'exemple ca marchera toujours. Par contre ton code avait peut etre effectivement besoin d'un contexte de formatage que l'overflow a apporté. Smiley smile
https://www.alsacreations.com/astuce/lire/1543-Le-contexte-de-formatage-block-en-CSS.html

mais bon, peu importe le verre tant qu'on est bourré (ou un truc comme ça...)

Bonne journée !