Appliquer un style CSS à un élément du GridView

Comment appliquer un style CSS à la balise <table> générée par le GridView ?

Comment appliquer un style CSS sur une colonne de la grille, c'est-à-dire sur chacun des <td> de la colonne donnée dans le <table> généré ?

Comment donner un style au texte contenu dans une cellule ?

Comme il existe plusieurs endroits où on peut spécifier une classe CSS, voici un petit résumé bien utile.

▼Publicité

Si le style est appliqué comme suit... On obtiendra...
<asp:GridView ... CssClass="monstyle"> <table class="monstyle>...</table>
<asp:TemplateField ... ControlStyle-CssClass="monstyle"> <td><span class="monstyle">...</span></td>
<asp:TemplateField ... ItemStyle-CssClass="monstyle"> <td class="monstyle">...</td>
<asp:TemplateField HeaderStyle-CssClass="monstyle" HeaderText="titre"> <th class="monstyle">titre</th> 

GridView imbriqués : styliser la grille principale et les sous-grilles

Lorsqu'une page Web présente une grille avec des sous-grilles imbriquées, il peut être intéressant d'appliquer un style à la grille principale et d'en appliquer un autre aux sous-grilles.

Voici une technique infaillible :

  • Appliquer une classe CSS à la grille principale.

    Ex :

    Fichier .aspx (ASP.NET)

    <asp:GridView ... CssClass="grilleprincipale">

  • Dans la feuille de style, écrire les règles CSS devant s'appliquer à la grille principale. Prendre soin de préciser la classe de la grille principale pour chaque règle.

    Ex :

    CSS

    .grilleprincipale tr:hover td {

        ...

    }

  • Appliquer une classe CSS différente pour la grille imbriquée.

    Ex :

    Fichier .aspx (ASP.NET)

    <asp:GridView ... CssClass="sousgrille">

  • Dans la feuille de style, copiez des règles de la grille principale et collez-les juste en-dessous.
  • Pour chacune des règles collées, ajoutez la classe de la sous-grille juste après la classe de la grille principale.

    Ex :

    CSS

    .grilleprincipale .sousgrille tr:hover td {

        ...

    }

  • Apportez les modifications pour styliser la sous-grille à votre goût. Les styles de la grille principale n'en seront pas affectés.
  • Vous pouvez supprimer la deuxième version des règles devant être les mêmes pour les deux grilles.
  • Si jamais vous ajoutez une règle pour la grille principale qui doit être différente pour la sous-grille, prenez soin de recopier cette règle et de l'ajuster comme vous venez de le faire.
Merci de partager ! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on StumbleUponEmail this to someone
Catégories