Gridview CSS frontières incompatibles

Question

Cela m'ennuie vraiment. J'utilise un GridView et je veux le formater de telle sorte que les bordures soient affichées de la même manière dans tous les navigateurs. En ce moment, j'obtiens des résultats variables entre IE, FF et Chrome. Je ne suis pas sûr de ce que je fais mal dans mon CSS (je suis assez nouveau pour CSS), mais quelque chose doit être vrai que l'un des navigateurs affiche les frontières correctement à tout moment. Le gridview CSS est comme suit:

.gridViewData 
{ 
    height:auto; 
    width:544px; 
    position:relative; 

    text-align:center; 

    background-color:#7D9EBA; 
    border:solid thin black; 
    border-right:none 0px black; 



} 

.gridViewData td 
{ 
    padding:2px; 
    border-top-style:none; 
    border-bottom-style:solid; 
    border-left-style:solid; 
    border-right-style:none; 
    border-color:Black; 
    border-width:thin; 



} 

.gridViewData th 
{ 
    height:10px; 
    width: 544px; 
    position:relative; 
    text-align:center; 
    border-top-style:dashed; 
    border-bottom-style:solid; 
    border-left-style:solid; 
    border-right-style:none; 
    border-color:Black; 
    border-width:thin; 
    background-color:white; 


} 

.gridViewData .alt 
{ 
    background-color:Red; 
} 

.gridViewData .pgr 
{ 
    background-color:Orange; 
} 

Je voudrais la table pour ressembler à cette grossière tentative d'un dessin: D. L'en-tête ne devrait pas avoir de frontières entre les cellules.

____________________________ 
|____________________________| 
|___|__________|________|____| 
|___|__________|________|____| 
|___|__________|________|____| 

Dans IE, l'en-tête n'a pas de bordure supérieure. Dans FF, il semble bien dans Chrome, il y a des séparateurs dans l'en-tête. Cela m'inquiète depuis un moment, alors j'espère que quelqu'un pourra faire la lumière là-dessus.

Merci

Answer 1

Utilisez les propriétés GridView pour y parvenir plutôt que d'appliquer CSS aux éléments de table générés. Par exemple, l'en-tête peut être appelée en appliquant le CSS à la propriété:

http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.gridview.headerstyle.aspx

EDIT:

Notez que l'attribut déclaratif bordercolor ajoute une déclaration de style en ligne qui applique uniquement à la table lui-même, pas des cellules individuelles. Ajout de l'attribut bordercolor ne programme pas utiliser un style en ligne, mais utilise la propriété bordercolor HTML, les navigateurs appliquent à toutes les frontières à l'intérieur de la table:

OnRowDataBound="MyGrid_RowDataBound" 

protected void MyGrid_RowDataBound(object sender, GridViewRowEventArgs e) 
{ 
    foreach (TableCell tc in e.Row.Cells) 
    { 
     tc.Attributes["style"] = "border-color: #000"; 
    } 
} 

Je mets un billet de blog à ce sujet - consultez le commentaire de Lee Dumond:

http://www.codersbarn.com/post/2009/05/31/Set-Color-of-GridLines-in-Gridview.aspx#comment