Gridview多表头如何加CSS样式呢

Question

本人菜鸟。。自学ing~~
用gridview绑定数据库显示出来，并用rowcreat事件添加了两行表头

问题来了：写了个CSS样式表，但是在设置HeaderStyle的样式时，只有第一行起作用。
我想问下，怎么设置CSS，让两行的表有不同的样式，并显示出来。

请教大神！！可怜的我也没有币、、、、

Answer 1

可以为第二行表头使用一个不同的 CSS 类，然后在 CSS 样式表中为这个类定义不同的样式。

例如，假设你的第一行表头使用的 CSS 类名为 "header1"，你可以在你的 CSS 样式表中定义如下样式：

.header1 {
  /* 定义第一行表头的样式 */
}

然后，你可以为第二行表头使用一个不同的 CSS 类名，如 "header2"，并在 CSS 样式表中定义如下样式：

.header2 {
  /* 定义第二行表头的样式 */
}

然后，你可以在你的 GridView 中的 rowcreated 事件处理程序中，为第二行表头设置 CSS 类，以便在页面呈现时应用相应的样式：

protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.Header)
    {
        // 为第一行表头设置 CSS 类
        e.Row.CssClass = "header1";

        // 创建第二行表头
        GridViewRow headerRow2 = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Insert);

        // 为第二行表头设置 CSS 类
        headerRow2.CssClass = "header2";

        // 在第二行表头中添加单元格
        ...

        // 将第二行表头添加到 GridView 中
        GridView1.Controls[0].Controls.AddAt(0, headerRow2);
    }
}

这样，在页面呈现时，第一行表头将使用 "header1" 的样式，第二行表头将使用 "header2" 的样式。

---

注意，在这种情况下，你需要在你的 GridView 中的 HeaderStyle 属性中不要指定任何样式，因为这可能会与你在 rowcreated 事件处理程序中设置的 CSS 类冲突。

---

另外，你还可以使用 GridView 的行模板和单元格模板，来为不同的行和单元格定义不同的样式。例如，你可以在行模板中使用 DataRowView 的 ItemType 属性来区分不同的行，并为这些行使用不同的 CSS 类。

例如：

<asp:GridView runat="server" ID="GridView1">
  <RowStyle CssClass='<%# Eval("ItemType") %>' />
  ...
</asp:GridView>

然后，你可以在你的数据源中返回的数据集中设置 ItemType 字段，并在 CSS 样式表中定义相应的样式。

---

例如，假设你的数据源中返回的数据集中包含 ItemType 字段，并且该字段的值可以是 "odd" 或 "even"，那么你可以在 CSS 样式表中定义如下样式：

.odd {
  /* 定义奇数行的样式 */
}

.even {
  /* 定义偶数行的样式 */
}

这样，在页面呈现时，GridView 中的奇数行将使用 "odd" 的样式，偶数行将使用 "even" 的样式。