Modifying display of your GridView with CSS

If you manage multiple GridViews that you want to have the same format, use CSS classes. In the Styles section of the GridView properties there are:

• AlternatingRowStyle
• EditRowStyle
• EmptyDataRowStyle
• FooterStyle
• HeaderStyle
• PagerStyle
• RowStyle
• SelectedRowStyle

In this example I'll create classes in my CSS file as such:


.tableAnalysisRow {
border-right:#000 thin solid;
border-bottom:#000 thin solid;
background:#fff;
color:#000;
border-top:#000 thin solid;
border-left:#000 thin solid;
padding:2px 2px 3px 4px;
}
.tableAnalysisAlternatingRow {
border-right:#000 thin solid;
border-bottom:#000 thin solid;
background:#DCDCDC;
color:#000;
border-top:#000 thin solid;
border-left:#000 thin solid;
padding:2px 2px 3px 4px;
}
.tableAnalysisHeader {
border-right:#000 thick solid;
border-bottom:#000 thick solid;
background:#DCDCDC;
color:#000;
border-top:#000 thick solid;
border-left:#000 thick solid;
font-weight:700;
border-collapse:separate;
border-color:#000;
padding: 2px 2px 3px 4px;
}

Now just modify the Class property in the appropriate Gridview Style property like the following:

                <asp:GridView ID="GridView1" runat="server" >
                    <RowStyle CssClass="tableAnalysisRow" />
                    <HeaderStyle CssClass="tableAnalysisHeader" />
                    <AlternatingRowStyle CssClass="tableAnalysisAlternatingRow" />
                </asp:GridView>

The result GridView is here.