Journal du Net > Développeurs > Contributions > Votre astuce CSS ?
Contribution précédente Contribution suivante

APPEL
A CONTRIBUTION

Vous manipulez le langage CSS au quotidien pour concevoir des pages Web ? Vous avez certainement une astuce à partager ! Cet espace est pour vous.
Participez
 Roll over sur un tableau  
Bertrand Dujardin , Poitiers
Roll over sur un tableau
Roll over sur un tableau. Photo déposée par Bertrand Dujardin

Roll over sur un tableau
Bertrand Dujardin
Quel est en 3 lignes l'objectif de votre astuce ?
Appliquer un roll-over sur les lignes d'un tableau permet de rendre celui-ci plus lisible.
Au passage de la souris sur le tableau la ligne se met en surbrillance.

Très utile lorsque le tableau est composé de beaucoup de lignes et de colonnes.

Décrivez votre astuce en détail. N'hésitez-pas à inclure des portions de codes.
Créez votre tableau normalement en HTML :


Col1Col2Col3
122322
1326565
121233


Nb : les entêtes de colonnes sont dans des balises TH et ne seront pas concernées par le roll-over.

Puis appliquez le style CSS suivant :

* {font-family: Geneva, Arial, Helvetica, sans-serif; font-size:12px}
table { background-color:#FFF; border: 1px solid #3366FF; border-collapse: separate;}
th {background-color:#3366FF; color:#FFCC66; }
tr:hover>td{ background-color:#B9CFFF; }
td {width: 50px; text-align: right; }

Publié le 13 mars 2007

Marc
Ca marchera hélas encore moins sur IE6, puisqu'il ne gère la pseudo-classe :hover que sur les liens (tag a)
Lionel
Ca fonctionne effectivement très bien avec Firefox... Mais pas sur IE 7 (pas testé sur la version 6). Seule la cellule concernée change de couleur lors de son survol, et non la ligne toute entière
Alexandre
Cela marche parfaitement. Au lieu d'une couleur on peut également mettre une image. Merci. Super tuyau !
Contribution précédente Contribution suivante
12 contributions : 1 2 3 4 5 6 7 8 9 10 11 12
 




 

© Benchmark Group, 69-71 avenue Pierre Grenier 92517 BOULOGNE BILLANCOURT Cedex

RECHERCHER