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.
Dossier Rubrique Client Web
Participez

 Roll over sur un tableau  

Bertrand Dujardin , Poitiers
Roll over sur un tableau - Roll over sur un tableau - Votre astuce CSS ?
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

  Les dernières contributions  
"Toutes vos images en CSS" Laurent Tuffraud, Saint Maurice

"Rappel des hacks CSS" Julien Lafont, Montpellier

"Infos bulle en CSS" Mathieu 

"Flottant et positionnement: ça bug ?" Maxime Garcia, Grenoble

"Css débutant" Emmanuel De Vauxmoret, Paris


  En ce moment sur Journal du Net Développeur  
Contribution précédente Contribution suivante
19 contributions : 1 ... 7 8 9 10 11 12 13 14 15 16 17 18 19
 




 

RECHERCHE