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

【问题标题】：Styling a GridView's rows and cells with CSS使用 CSS 为 GridView 的行和单元格设置样式
【发布时间】：2012-06-25 16:29:13
【问题描述】：

我想使用 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>

【问题讨论】：

标签： css gridview webforms

【解决方案1】：

像这样使用选择器

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

【讨论】：

有没有办法访问表格中的单个单元格。例如，如果我想将列中的所有单元格更改为一种颜色或只是将随机单元格更改为某种颜色
可以使用css3伪选择器（即IE8-7-6不支持）:nth-child

【解决方案2】：

有几种方法可以将行样式应用于网格视图。

1) 在后面的代码中，您可以在RowDatabound 上应用样式等。

2) 在gridview标签之间你可以使用：

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

请参阅此page 了解更多详情。

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

您可以使用属性窗口将 CssClass 属性设置为使用来自 CSS 的类。或者您可以简单地设置字体和颜色，而不是使用相同的属性窗口。

【讨论】：

【解决方案5】：

在gridview中，你可以设置名为HeaderCSSClass和CSSClass的属性（不确定名称，可能是错误的。谷歌他们）。

【讨论】：