我将如何使用 CSS 复制这种 GridView 样式？答案

【问题标题】：How would I replicate this GridView style using CSS?我将如何使用 CSS 复制这种 GridView 样式？
【发布时间】：2011-10-05 18:12:10
【问题描述】：

一个基本的问题，但我对 CSS 有点生疏，但我被要求使用 CSS 而不是“gridview style”标签（如下所示）。

基本上，我在 GridView 上使用以下样式：

 <RowStyle BackColor="#ededed" ForeColor="#333" HorizontalAlign="Center" />
 <FooterStyle BackColor="#465F7F" Font-Bold="True" ForeColor="White" />
 <PagerStyle BackColor="#465F7F" ForeColor="White" HorizontalAlign="Center" />
 <SelectedRowStyle BackColor="#465F7F" Font-Bold="false" ForeColor="#ffffff" />
 <HeaderStyle BackColor="#465F7F" Font-Bold="false" ForeColor="White" HorizontalAlign="Center" />
 <EditRowStyle BackColor="#B7B7B7" />
 <AlternatingRowStyle BackColor="#e2e6e8" ForeColor="#333333" />

我可以将其转换为 CSS 吗？所以我可以设置我的 GridView CssClass 并应用所有这些样式。现在代码在每个网格上都被复制，所以改变它是一件苦差事！

【问题讨论】：

请张贴生成的html。

标签： asp.net css gridview

【解决方案1】：

将您的基本样式应用到 GridView 并使用 CSS 的强大功能

  <asp:GridView id="gvTestGrid" runat="server" cssclass="gridview-common" >
     <HeaderStyle cssClass="gridview-header" />
     ...
    </asp:GridView>

CSS

.gridview-common {  
  /* table styles */ 
 }

.gridview-common th.gridview-header, .gridview-common th.gridview-header:hover   {  
 /* Header styles */ 
 }

.gridview-common tbody tr {
     /* Row styles */ 
}

.gridview-common tbody tr:hover {
     /* Row Hover styles */ 
}

【讨论】：

【解决方案2】：

通过替换下面的相应样式，您将获得相同的效果。

您还应该考虑使用 JQuery Theme Roller 的样式来轻松使网格看起来非常漂亮。 http://jqueryui.com/themeroller/

.RowStyle
    {
          background-color: #ededed;
          color:#333;
          text-align:center;
    }
    .FooterStyle
    { 
        background-color:#465F7F; font-weight: bold; color:White;
    }
    .PagerStyle {background-color:#465F7F; color:White; text-align:center; }
    .SelectedRowStyle { background-color:#465F7F; font-weight: normal; color:#ffffff }
    .HeaderStyle {background-color:#465F7F; font-weight: normal; color:White; text-align:center; }
    .EditRowStyle {background-color:#B7B7B7; }
    .AlternatingRowStyle {background-color:#e2e6e8; color:#333333 }

【讨论】：

【解决方案3】：

只需使用网格的CssClass 属性并将所有内容放入该 css 类即可！

例如，而不是这个：

<RowStyle BackColor="#ededed" ForeColor="#333" HorizontalAlign="Center" />

您会为所有常见的样式网格使用相同的标记：

<RowStyle CssClass="gridViewRow" />

然后 css 类将如下所示：

.gridViewRow
{
   background-color:#ededed;
   color:#333;
   text-align:center;
}

【讨论】：