使用CSS设置GridView行和单元格的样式

使用CSS设置GridView行和单元格的样式,css,gridview,webforms,Css,Gridview,Webforms,我想使用CSS格式化我的GridView行 我在aspx中设置了GridView,如下所示: <asp:GridView ID="GridView1" runat="server"> </asp:GridView> 我通过调用从数据访问层获取数据集的方法,在代码隐藏中设置并绑定数据源 但是,由于我以编程方式设置数据源,因此行和单元格没有id属性 如何使用CSS设置这些行和单元格的样式和格式 这是当前生成的HTML: <div> <table c

我想使用CSS格式化我的GridView行

我在aspx中设置了GridView,如下所示:

<asp:GridView ID="GridView1" runat="server">
</asp:GridView>
我通过调用从数据访问层获取数据集的方法,在代码隐藏中设置并绑定数据源

但是,由于我以编程方式设置数据源,因此行和单元格没有id属性

如何使用CSS设置这些行和单元格的样式和格式

这是当前生成的HTML:

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

在gridview中,可以设置名为HeaderCSClass和CSSClass的属性。如果不确定名称,则可能会出错。用谷歌搜索它们。

像这样使用选择器

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

修改网格以包含每列。应用ItemStyle CssClass属性

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

可以使用“属性”窗口将CssClass属性设置为使用CSS中的类。或者,您可以使用相同的属性窗口简单地设置字体和颜色


有几种方法可以将行样式应用于gridview

1在代码隐藏中,您可以应用样式等

2在gridview标记之间,您可以使用:

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

更多细节请参见此

是否有方法访问表中的单个单元格。例如,如果我想将列中的所有单元格更改为一种颜色,或者仅将随机单元格更改为某种颜色,那么可以使用css3伪选择器,这意味着IE8-7-6不支持它