CSSを使用してこのGridViewスタイルをどのように複製できますか？

Question

基本的な質問のビットですが、私はCSSでやや錆びますが、私は「gridview style」タグではなくCSSを使用するように要求されています。

は基本的に、私は私の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を設定するだけで、これらのスタイルをすべて適用できます。今すぐコードがすべてのグリッドに複製されるので、それを変更するのは雑用です！

Answer 1

グリッドのプロパティーCssClassを使用して、すべてをそのCSSクラスに入れれば完了です！

<RowStyle CssClass="gridViewRow" /> 

とCSSクラスは次のようになります：

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

すべてのあなたの一般的なスタイルのグリッドに同じマークアップを使用することになり

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

：これに代えて例えば

Answer 2

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 */ 
} 

Answer 3

あなたは同じ効果が得られます以下の対応するスタイルを置き換えることによって。

また、JQueryテーマローラーのスタイルを使用して、グリッドを簡単に見やすくすることを検討する必要があります。

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