GridView custom CSS style
Gridview display the database values on GridView Row but we want to custom style add the css for Gridview row,header,paging like below example using asp.net.
DEMO
CSS
HTML CODING
Gridview display the database values on GridView Row but we want to custom style add the css for Gridview row,header,paging like below example using asp.net.
DEMO
CSS
.SGrid {
width:auto;
background-color: #fff;
margin: 5px 0 10px 0;
border: solid 1px #ff006e;
border-collapse:collapse;
}
.SGrid th {
padding: 4px 2px;
color: #fff;
background:#f17c7c;
border-left: solid 1px #ff006e;
font-size: 0.9em;
text-align:center !important;
}
.SGrid td {
padding: 2px;
border: solid 1px #ff006e;
color: #717171;
text-align:center !important;
}
.SGrid .alt { background: #cec4c4 ; }
.SGrid .pgr { background: #424242 ; }
.SGrid .pgr table { margin: 5px 0; }
.SGrid .pgr td {
border-width: 0;
padding: 0 6px;
border-left: solid 1px #f17c7c;
font-weight: bold;
color: #f17c7c;
line-height: 12px;
background:#fff;
text-align:center !important;
}
.SGrid .pgr a { color:#424242; text-decoration: none; }
.SGrid .pgr a:hover { color:#ff006e; text-decoration: none; }
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
/*GRIDVIEW STYLISH*/
.SGrid {
width:auto;
background-color: #fff;
margin: 5px 0 10px 0;
border: solid 1px #ff006e;
border-collapse:collapse;
}
.SGrid th {
padding: 4px 2px;
color: #fff;
background:#f17c7c;
border-left: solid 1px #ff006e;
font-size: 0.9em;
text-align:center !important;
}
.SGrid td {
padding: 2px;
border: solid 1px #ff006e;
color: #717171;
text-align:center !important;
}
.SGrid .alt { background: #cec4c4 ; }
.SGrid .pgr { background: #424242 ; }
.SGrid .pgr table { margin: 5px 0; }
.SGrid .pgr td {
border-width: 0;
padding: 0 6px;
border-left: solid 1px #f17c7c;
font-weight: bold;
color: #f17c7c;
line-height: 12px;
background:#fff;
text-align:center !important;
}
.SGrid .pgr a { color:#424242; text-decoration: none; }
.SGrid .pgr a:hover { color:#ff006e; text-decoration: none; }
/*GRIDVIEW STYLISH*/
</style>
</head>
<body>
<form id="form1" runat="server">
<div align="center">
<asp:GridView ID="GridView1" AlternatingRowStyle-CssClass="alt" PagerStyle-CssClass="pgr" CssClass="SGrid"
runat="server" AllowPaging="True" AutoGenerateColumns="False" DataKeyNames="Id" DataSourceID="SqlDataSource1" PageSize="3">
<AlternatingRowStyle CssClass="alt"></AlternatingRowStyle>
<Columns>
<asp:BoundField DataField="Id" HeaderText="Id" ReadOnly="True" SortExpression="Id" />
<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
<asp:BoundField DataField="Username" HeaderText="Username" SortExpression="Username" />
<asp:BoundField DataField="Email" HeaderText="Email" SortExpression="Email" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:dbcon %>" SelectCommand="SELECT * FROM [register]"></asp:SqlDataSource>
</div>
</form>
</body>
</html>
0 comments:
Post a Comment