Jitesh Byahut 8/5/2014 12919

GridView Css Style In Asp.Net

GridView Style

Here we are defining GridView style like font-syle, font-familly, border etc.

.GridViewStyle {border:1px solid #ddd; border-collapse:collapse; font-family:Arial, sans-serif; table-layout:auto; font-size:14px; }

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:

gridview css example

Row Style

You can define row color and text-alignment.

tr.RowStyle{text-align:center; background-color:#ffffff; }

Output:

gridview css example

Alternate style

You can also define alternate row color and text-alignment.

tr.AlternatingRowStyle {text-align:center; background-color:#7fefae;}

Output:

gridview css example

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:

gridview css example

Footer Style

Here we are defining footer style.

.FooterStyle {background-color:#938ede; height:25px;}

Output:

gridview css example

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;}

 

.PagerStyle span {padding:2px 5px 2px 5px; color:#000; font-weight:bold; border:2px solid #938ede;}

Output:

gridview css example

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>

</html>

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;}

 

.PagerStyle span {padding:2px 5px 2px 5px; color:#000; font-weight:bold; border:2px solid #938ede;}

Copy and paste above codes in your style sheet and drag on page.

Output:

gridview css example


Please give your feedback for improving this page