一个不错的GridView样式

样式表：

代码

 <style>
        .GridViewStyle   
        {   
            font-family: Arial, Sans-Serif;   
            font-size:small;   
            table-layout: auto;   
            border-collapse: collapse;   
            border:#B3D08F 1px solid;   
        }   
        /*Header and Pager styles*/  
        .HeaderStyle   
        {   
            background-image:url(../images/HeaderWhiteChrome.jpg);   
            background-position: center 50%;   
            background-repeat: repeat-x;   
            color:#009;   
            font-size:12px;   
          
               
        }   
          
        .PagerStyle   
        {   
            background-image:url(../images/tab_14.gif);   
            background-position: center 50%;   
            background-repeat: repeat-x;   
            color:#009;   
            font-size:12px;   
          
               
        }   
        .HeaderStyle th   
        {   
            padding: 5px;   
            color: #009;   
        }   
        .HeaderStyle a   
        {   
            text-decoration:none;   
            color:#ffffff;   
            display:block;   
            text-align:left;   
            font-weight:normal;   
        }   
        .PagerStyle table   
        {   
            text-align:center;   
            margin:auto;   
        }   
        .PagerStyle table td   
        {   
            border:0px;   
            padding:5px;   
        }   
        .PagerStyle td   
        {   
            border-top: #1d1d1d 1px solid;   
        }   
        .PagerStyle a   
        {   
            color:#000000;   
            text-decoration:none;   
            padding:2px 10px 2px 10px;   
            border-top:solid 1px #777777;   
            border-right:solid 1px #333333;   
            border-bottom:solid 1px #333333;   
            border-left:solid 1px #777777;   
        }   
        .PagerStyle span   
        {   
            font-weight:bold;   
            color:#000000;   
            text-decoration:none;   
            padding:2px 10px 2px 10px;   
        }   
        /*RowStyles*/  
        .RowStyle td, .AltRowStyle td, .SelectedRowStyle td, .EditRowStyle td /*Common Styles*/  
        {   
            padding: 5px;   
            border: solid 1px #B3D08F;   
        }   
        .RowStyle td   
        {   
            background-color: #ffffff;   
        }   
        .AltRowStyle td   
        {   
            background-color: #f0f0f0;   
        }   
        .SelectedRowStyle td   
        {   
            background-color: #ffff66;   
        }  

         
</style>

 

 

GridView定义：

代码

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="true" CssClass="GridViewStyle" GridLines="Horizontal" PageSize="20" Width="422px">   
            
 <RowStyle CssClass="RowStyle" />   
         
 <PagerStyle CssClass="PagerStyle" />   
  
 <SelectedRowStyle CssClass="SelectedRowStyle" />   
  
 <HeaderStyle CssClass="HeaderStyle" BorderColor="#404040" />   
  
 <EditRowStyle CssClass="EditRowStyle" />   
  
 <AlternatingRowStyle CssClass="AltRowStyle" />   
</asp:GridView>