GridView Css Style In Asp.Net
GridView Style
Here we are defining GridView style like font-syle, font-familly, border etc.
Header Style
Here we are defining GridView's header style like background-color, text-alignment, border, padding etc.
.HeaderStyle {border:1px, solid, #ddd; background-color:#938ede
;
}
.HeaderStyle th {padding:5px 0px 5px 0px; color:#333; text-align:center ; }
Output:
Row Style
You can define row color and text-alignment.
tr.RowStyle{text-align:center; background-color:#ffffff
;
}
Output:
Alternate style
You can also define alternate row color and text-alignment.
Output:
On mouse over
You can also apply css for row hover.
tr.RowStyle:hover {cursor:pointer; background-color:#f69542;}
tr.AlternatingRowStyle:hover {cursor:pointer; background-color:#f69542;}
Output:
Footer Style
Here we are defining footer style.
Output:
Pager style
We are defining pager style of GridView.
.PagerStyle table { margin:auto;border:none;}
tr.PagerStyle {text-align:center; background-color:#ddd;}
.PagerStyle table td {border:1px; padding:5px
;
}
.PagerStyle a {border:1px solid #fff; padding:2px 5px 2px 5px; color:#333; text-decoration:none;}
Output:
Complete css Examples:
Here we are providing complete tutorial. We are binding a GridView and add GridView.css style sheet which contains all css style related to GridView.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>GridView Css</title>
<link href="Css/GridView.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" Width="600px"
AllowPaging="true" PageSize="5" ShowFooter="true" CssClass="GridViewStyle">
<HeaderStyle CssClass="HeaderStyle" />
<FooterStyle CssClass="FooterStyle" />
<RowStyle CssClass="RowStyle" />
<AlternatingRowStyle CssClass="AlternatingRowStyle" />
<PagerStyle CssClass="PagerStyle" />
</asp:GridView>
</div>
</form>
</body>
GridView.css style sheet
.GridViewStyle {border:1px solid #ddd; border-collapse:collapse; font-family:Arial, sans-serif; table-layout:auto; font-size:14px
;
}
/*Header*/
.HeaderStyle {border:1px, solid, #ddd; background-color:#938ede
;
}
.HeaderStyle th {padding:5px 0px 5px 0px; color:#333; text-align:center
;
}
/*Row*/
tr.RowStyle{text-align:center; background-color:#ffffff
;
}
tr.AlternatingRowStyle {text-align:center; background-color:#7fefae;}
tr.RowStyle:hover {cursor:pointer; background-color:#f69542;}
tr.AlternatingRowStyle:hover {cursor:pointer; background-color:#f69542;}
/*Footer*/
.FooterStyle {background-color:#938ede; height:25px;}
/*Pager*/
.PagerStyle table { margin:auto;border:none;}
tr.PagerStyle {text-align:center; background-color:#ddd;}
.PagerStyle table td {border:1px; padding:5px
;
}
.PagerStyle a {border:1px solid #fff; padding:2px 5px 2px 5px; color:#333; text-decoration:none;}
Copy and paste above codes in your style sheet and drag on page.
Output:
