Discussion :

[Jose.N70]

Bonjour, je souhaite votre aide pour un problème CSS.

Avant de commencer, je débute en CSS donc soyez indulgent ...

Je cherche à changer la couleur d'une colonne d'un tableau au survol de celle ci , avec les lignes j'y arrive sans trop de problème ( tr:hover ... ) mais un td:hover ne donne rien, enfin si il change la couleur que d'une seule case.

Je souhaite le faire en CSS sans javascript.

Merci de votre aide éventuelle.

[sylvain258]

tu peux donner le code afin de voir un peu mieux le pb ?

[rodolphebrd]

Bonjour,

Ce n'est pas très simple à faire en css : http://codepen.io/rodolpheb/pen/IBEet

La solution est souvent proposée avec une couche de Javascript.

[Jose.N70]

tu peux donner le code afin de voir un peu mieux le pb ?

Un code simple, un tableau avec X lignes et X colonnes et un css avec un tr:hover { background... } et td:hover { background ... }

Bonjour,

Ce n'est pas très simple à faire en css : http://codepen.io/rodolpheb/pen/IBEet

La solution est souvent proposée avec une couche de Javascript.

Je viens de regarder ton lien , mais les colonnes ne changent pas de couleur. Je voudrai dans un premier temps voir ( et comprendre ) cela sans JS ni autre.

Merci de votres aides

[rodolphebrd]

Pour Firefox il faut rajouter du javascript.
Le code fonctionne sur Chrome et Safari.

[CCyrillus]

Pour Firefox il faut rajouter du javascript.
Le code fonctionne sur Chrome et Safari.

A moins d'utiliser les marges négatives au lieu du positionement absolu http://codepen.io/anon/pen/zqBfH

[rodolphebrd]

Comme d'habitude je suis surpris par le résultat.

[CCyrillus]

Bonsoir,

l'usage des pseudos element te permet de generer des boites vides.

Ces boites vides peuvent ensuite etre affichées et stylées.

L'idée est donc de posé des boites de grandes hauteurs sous les cellules et de les contenir dans la largeur de celles-ci.

Idée de base avec une boite avant et après chaque contenu de cellule (th ou td). (cette demo fonctionne sous Firefoxe :p )

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
td:hover:before, th:hover:before,
td:hover:after , th:hover:after
{ 
  content:'';
  display:block;
  height:2000px;
  margin:-1000px 0;  /* reduis virtuellement a zero de hauteur l'element pour ne pas perturbé la mise en forme generale */
  background:yellow;  
}

avec l'usage des pseudo class :nth-child(n) , tu peut aussi alterner les couleurs : http://codepen.io/anon/pen/ixluG
version debuggué si cellules vides http://codepen.io/anon/pen/dGyDq