Journal du Net > Développeurs > Contributions > Votre astuce CSS ?

Votre astuce CSS ?(23 contributions)

Participez
Une image PNG transparente Un min-height sur IE et Firefox
Roll over sur un tableau

 Roll over sur un tableau  

Bertrand Dujardin , Poitiers le 13 mars 2007
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

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; }
 
 

Les dernières contributions

 

 

En ce moment sur Journal du Net Développeur

 
Une image PNG transparente Un min-height sur IE et Firefox
23 contributions : 1 ... 11 12 13 14 15 16 17 18 19 20 21 22 23
 
Autour du même sujet

Adapter image au block css - tutoriel/pratique

Feuille de style css pour mobile - tutoriel/pratique

Soumettez votre meilleure astuce Flex/MXML - appel à temoin

Soumettez votre meilleure astuce Ruby on Rails - appel à temoin

Les préfixes vendeurs en CSS - tutoriel/pratique

Partagez votre astuce pour lutter contre les bugs - appel à temoin

Soumettez vos astuces pour optimiser le référencement - appel à temoin

Classe CSS conditionnelle - Classe conditionnelle pour IE 6 et 7 - tutoriel/pratique

Formats d'affichage en CSS 2.1 - tutoriel/pratique

Soumettez votre meilleure astuce pour assurer l'accessibilité d'un site Web - appel à temoin

Plus de contenus similaires Moins
Magazine Développeurs Envoyer Imprimer Haut de page




A VOIR EGALEMENT