Question

In this question, I was given a really cool answer to alternating an image and its description between left and right, respectively. Now I want to apply styling to both, e.g. padding-top, padding-bottom etc. How do I apply a style to both the RowStyle and AlternatingRowStyle in this scenario.

<AlternatingRowStyle CssClass='ProductAltItemStyle' />    <RowStyle CssClass='ProductItemStyle' /> <Columns>     <asp:TemplateField>         <ItemTemplate>             <div class='Image'><asp:Image runat='server' ID='productImage' ImageUrl='<%# Eval('imageUrl') %>' /></div>             <div class='Description'><asp:Label runat='server' ID='lblProductDesc' Width='100%' Text='<%# Eval('productDesc') %>'></asp:Label></div>         </ItemTemplate>     </asp:TemplateField> 

Answer 1

Alternatively you can do this:

<AlternatingRowStyle CssClass='ProductAltItemStyle ProductCommonStyle' />    <RowStyle CssClass='ProductItemStyle ProductCommonStyle' /> 

ProductCommonStyle contains formatting that is common to both alternating and standard rows.

Even better, you can assign a style to your whole gridview, and use that to define the shared classes:

table.GridViewStyle tr td {    padding:3px 5px;    border:1px solid gray; }  tr.ProductAltItemStyle td {     background:white; }  tr.ProductItemSTyle td {     background:silver; }