Styling a GridView's rows and cells with CSS

问题

I want to use CSS to format my GridView rows.

I've set up my GridView in the aspx like so:

<asp:GridView ID="GridView1" runat="server">
</asp:GridView>

I set and bind the data source in the code-behind by calling a method to get my data set from a data access layer.

However, because I set the datasource programmatically, the rows and cells have no id attributes.

How can you use CSS to style and format those rows and cells?

This is the HTML generated currently:

<div>
    <table cellspacing="0" rules="all" border="1" id="ContentPlaceHolderHome_GridView1" style="border-collapse:collapse;">
        <tr>
            <th scope="col">Date</th><th scope="col">Project</th><th scope="col">Amount</th>
        </tr><tr>
            <td>1/1/2011 12:00:00 AM</td><td>MY COMPANY</td><td>1000.99</td>
        </tr><tr>
            <td>2/1/2011 12:00:00 AM</td><td>ABC Company</td><td>1001.99</td>
        </tr><tr>
            <td>1/3/2011 12:00:00 AM</td><td>MY COMPANY</td><td>1002.99</td>
        </tr><tr>
            <td>4/1/2011 12:00:00 AM</td><td>MY COMPANY</td><td>1003.99</td>
        </tr>
    </table>
</div>

回答1:

use selector like this

  <style>
    #ContentPlaceHolderHome_GridView1 td {
     background : #ccc;
   }
  </style>

回答2:

There are a couple ways you can apply row style to a gridview.

1) In the code behind you can apply styles and such on RowDatabound.

2) In between the gridview tags you can use the:

<asp:GridView ID="GridView1" runat="server"> 
<rowstyle CssClass="myClass" />
<alternatingrowstyle CssClass="myClass" />
</asp:GridView>

See this page for more detail.

回答3:

Modify your grid to include each column. Apply the ItemStyle-CssClass attribute.

<asp:GridView runat="server" AutoGenerateColumns="false" ID="fooGrid" >
    <Columns> 
     <asp:BoundField  ItemStyle-CssClass="fooBarBat"  
                      DataField="MyDataFieldName" HeaderText="Bar" />     
    </Columns>
</asp:GridView>

回答4:

You can use the properties window to set the CssClass property to use a class from a CSS. Or you can simple set the fonts and colors instead using the same properties window.

回答5:

in gridview you can set attributes called HeaderCSSClass and CSSClass(not sure about the names, could be wrong. google them).

来源：https://stackoverflow.com/questions/11193323/styling-a-gridviews-rows-and-cells-with-css

标签

css

gridview

webforms