如何使用CSS複製此GridView樣式？

這是一個基本問題，但我對CSS有些生疏，但我被要求使用CSS而不是'gridview style'標籤（正如我將在下面顯示的那樣）。如何使用CSS複製此GridView樣式？

基本上，我用我的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，它會應用所有這些樣式。現在代碼被複制到每個網格上，所以改變它是件麻煩事！

來源

2011-07-14 Chris

請發佈生成的html。 – brenjt

只需使用CssClass屬性的網格，並把所有的CSS類，你就完成了！

例如，而不是這樣的：

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

你會使用相同的標記爲所有常見的款式格：

<RowStyle CssClass="gridViewRow" />

然後CSS類是這樣的：

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

來源

2011-07-14 22:37:55 algiecas

將您的基本樣式應用到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 */ 
}

來源

2011-07-14 22:45:27

通過更換下面你相應的樣式將得到相同的效果。

另外，您應該考慮使用JQuery Theme Roller的樣式來輕鬆地使網格看起來非常漂亮。

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

來源

2011-07-14 22:45:45

如何使用CSS複製此GridView樣式？

回答

相關問題