Question

I believe the GridView is rendered as a table, so how could I translate the inline style of the following GridView to an external stylsheet using classes?

<asp:GridView ID="gvQuotes" 
              runat="server" 
              BackColor="#DEBA84" BorderColor="#DEBA84" 
              BorderStyle="None" BorderWidth="1px" 
              CellPadding="3" CellSpacing="2" 
              GridLines="Both"
              Width="100%"
              ShowFooter="True">

<RowStyle BackColor="#FFF7E7" ForeColor="#8C4510" 
          HorizontalAlign="Center" />

<FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />

<PagerStyle ForeColor="#8C4510" HorizontalAlign="Center" />

<SelectedRowStyle BackColor="#738A9C" Font-Bold="True" 
                  ForeColor="White" />

<HeaderStyle BackColor="#A55129" Font-Bold="True" 
             ForeColor="White" Font-Underline="true"
             HorizontalAlign="Center" />

</asp:GridView>

For example, for the overall grid, would I do something like the following and set the CssClass=”grid”

.grid
{
    background-color: #DEBA84;
    border-color:#DEBA84;
    width:100%;

}

I am not sure how to handle the bordestyle, cellpadding, cellspacing, and gridlines

Answer 1

Check this out. I think it will be helpful to you.

The key here is how to target certain ways to display table cells.

table.gridView td
{
    padding:10px; // same as CellPadding on table HTML tag
}