lunes, 21 de febrero de 2011

Grid CSS

Se describe como agregar estilo a un Gridview con CSSe imagenes.


Como dar formato a un gridview con css
Creamos nuestro estilo
.Grid
{
width: 100%;
background-color: #fff;
margin: 5px 0 10px 0;
border: solid 1px #525252;
border-collapse: collapse;
}
.Grid td
{
padding: 2px;
border: solid 1px #c1c1c1;
color: #717171;
}
.Grid th
{
padding: 4px 2px;
color: #fff;
background: #424242 url(Image/grd_head.png) repeat-x top;
border-left: solid 1px #525252;
font-size: 0.9em;
}
.Grid .alt
{
background: #fcfcfc url(Image/grd_alt.png) repeat-x top;
}
.Grid .pgr
{
background: #424242 url(Image/grd_pgr.png) repeat-x top;
}
.Grid .pgr table
{
margin: 5px 0;
}
.Grid .pgr td
{
border-width: 0;
padding: 0 6px;
border-left: solid 1px #666;
font-weight: bold;
color: #fff;
line-height: 12px;
}
.Grid .pgr a
{
color: #666;
text-decoration: none;
}
.Grid .pgr a:hover
{
color: #000;
text-decoration: none;
}


Creamos nuestro grid view asignándole los estilos

<asp:GridView ID="grvUsuario" runat="server" Width="100%" AutoGenerateColumns="False" GridLines="None" AllowPaging="true" CssClass="Grid" PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt">
 <Columns>
<asp:BoundField DataField="UNO" HeaderText="UNO" />
<asp:BoundField DataField="DOS" HeaderText="DOS" />
 <asp:BoundField DataField="TRES" HeaderText="TRES" />
<asp:BoundField DataField="CUATRO" HeaderText="CUATRO" /> 
 </Columns>
</asp:GridView>

Estas son las imagenes:


   






No hay comentarios:

Publicar un comentario