En la gran mayoría de sitios web se utilizan los GridView y para presentarlo a los usuarios finales, el GridView debe tener un buen formato estético, por eso en este artículo te mostrare como poner un estilo css a un GridView.
Podemos utilizar las hojas de estilo en cascada para dar formato al control GridView. El siguiente ejemplo muestra cómo se puede formatear el control GridView utilizando hojas de estilo en cascada. Encuentra el código fuente a continuación:
HTML:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="GridViewCss_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GridView con estilo css</title>
<link href="Estilo.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" GridLines="None"
AllowPaging="true" CssClass="mGrid" PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt"
PageSize="7" >
<Columns>
<asp:BoundField DataField="EmpId" HeaderText="ID" />
<asp:BoundField DataField="Name" HeaderText="Nombre" />
<asp:BoundField DataField="Address" HeaderText="Dirección" />
<asp:BoundField DataField="Date" HeaderText="Fecha" />
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
CSS:
* {
padding: 0;
margin: 0;
}
body {
font: 11px Tahoma;
}
h1 {
font: bold 32px Times;
color: #666;
text-align: center;
padding: 20px 0;
}
#container {
width: 700px;
margin: 10px auto;
}
.mGrid {
width: 100%;
background-color: #fff;
margin: 5px 0 10px 0;
border: solid 1px #525252;
border-collapse: collapse;
}
.mGrid td {
padding: 2px;
border: solid 1px #c1c1c1;
color: #717171;
}
.mGrid th {
padding: 4px 2px;
color: #fff;
background: #424242 url(grd_head.png) repeat-x top;
border-left: solid 1px #525252;
font-size: 0.9em;
}
.mGrid .alt {
background: #fcfcfc url(grd_alt.png) repeat-x top;
}
.mGrid .pgr {
background: #424242 url(grd_pgr.png) repeat-x top;
}
.mGrid .pgr table {
margin: 5px 0;
}
.mGrid .pgr td {
border-width: 0;
padding: 0 6px;
border-left: solid 1px #666;
font-weight: bold;
color: #fff;
line-height: 12px;
}
.mGrid .pgr a {
color: #666;
text-decoration: none;
}
.mGrid .pgr a:hover {
color: #000;
text-decoration: none;
}
VB.NET
Imports System.Data
Partial Class GridViewCss_Default
Inherits System.Web.UI.Page
Private Sub BindData()
Dim dt As New DataTable()
dt.Columns.Add("EmpId", GetType(Integer))
dt.Columns.Add("Name", GetType(String))
dt.Columns.Add("Address", GetType(String))
dt.Columns.Add("Date", GetType(DateTime))
'
' Here we add five DataRows.
'
dt.Rows.Add(25, "José", "México", DateTime.Now)
dt.Rows.Add(50, "Fransua Meme", "Francia", DateTime.Now)
dt.Rows.Add(10, "Ruben", "España", DateTime.Now)
dt.Rows.Add(21, "Aditya", "Italia", DateTime.Now)
dt.Rows.Add(100, "Jhon", "Inglaterra", DateTime.Now)
dt.Rows.Add(101, "ABC", "Delhi", DateTime.Now)
dt.Rows.Add(102, "XYZ", "Noida", DateTime.Now)
dt.Rows.Add(103, "BBC", "Delhi", DateTime.Now)
dt.Rows.Add(104, "CIA", "Banglore", DateTime.Now)
dt.Rows.Add(105, "KBC", "Delhi", DateTime.Now)
dt.Rows.Add(106, "Jack", "Noida", DateTime.Now)
dt.Rows.Add(107, "Jhon", "Gurgaon", DateTime.Now)
dt.Rows.Add(108, "Mali", "Gurgaon", DateTime.Now)
dt.Rows.Add(109, "Sara", "Noida", DateTime.Now)
GridView1.DataSource = dt
GridView1.DataBind()
End Sub
Protected Sub GridView1_PageIndexChanging(sender As Object, e As GridViewPageEventArgs) Handles GridView1.PageIndexChanging
GridView1.PageIndex = e.NewPageIndex
BindData()
End Sub
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
BindData()
End Sub
End Class
Si tienes comentarios o dudas puedes escribirme en el apartado de comentarios, tus comentarios nos ayudan a mejorar y a enriquecer el sitio web. Gracias por leernos J.
Para descargar el ejemplo lo puedes hacer aquí.
