gridview布局_grid css

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

gridview布局_grid css

页面代码：

01.<asp:GridView ID="gvCustomres" runat="server"  
02.    DataSourceID="customresDataSource"    
03.    AutoGenerateColumns="False"  
04.    GridLines="None"  
05.    AllowPaging="true"  
06.    CssClass="mGrid"  
07.    PagerStyle-CssClass="pgr"  
08.    AlternatingRowStyle-CssClass="alt">  
09.    <Columns>  
10.        <asp:BoundField DataField="CompanyName" HeaderText="Company Name" />  
11.        <asp:BoundField DataField="ContactName" HeaderText="Contact Name" />  
12.        <asp:BoundField DataField="ContactTitle" HeaderText="Contact Title" />  
13.        <asp:BoundField DataField="Address" HeaderText="Address" />  
14.        <asp:BoundField DataField="City" HeaderText="City" />  
15.        <asp:BoundField DataField="Country" HeaderText="Country" />  
16.    </Columns>  
17.</asp:GridView>  
18.<asp:XmlDataSource ID="customresDataSource" runat="server" DataFile="~/App_Data/data.xml"></asp:XmlDataSource>

css代码

01..mGrid {    
02.    width: 100%;    
03.    background-color: #fff;    
04.    margin: 5px 0 10px 0;    
05.    border: solid 1px #525252;    
06.    border-collapse:collapse;    
07.}   
08..mGrid td {    
09.    padding: 2px;    
10.    border: solid 1px #c1c1c1;    
11.    color: #717171;    
12.}   
13..mGrid th {    
14.    padding: 4px 2px;    
15.    color: #fff;    
16.    background: #424242 url(grd_head.png) repeat-x top;    
17.    border-left: solid 1px #525252;    
18.    font-size: 0.9em;    
19.}   
20..mGrid .alt { background: #fcfcfc url(grd_alt.png) repeat-x top; }   
21..mGrid .pgr { background: #424242 url(grd_pgr.png) repeat-x top; }   
22..mGrid .pgr table { margin: 5px 0; }   
23..mGrid .pgr td {    
24.    border-width: 0;    
25.    padding: 0 6px;    
26.    border-left: solid 1px #666;    
27.    font-weight: bold;    
28.    color: #fff;    
29.    line-height: 12px;    
30. }      
31..mGrid .pgr a { color: #666; text-decoration: none; }   
32..mGrid .pgr a:hover { color: #000; text-decoration: none; }