Gridview多表头如何加CSS样式呢

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

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

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

可以为第二行表头使用一个不同的 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" 的样式。