GridView控件CSS美化

最新推荐文章于 2023-04-04 13:13:08 发布

转载最新推荐文章于 2023-04-04 13:13:08 发布 · 520 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Gzu_zb/p/11170964.html

博客介绍了GridView控件的CSS美化方法，通过在GridView中添加属性CssClass=\mGrid\来调用样式。详细给出了.mGrid及其子元素如td、th等的CSS样式代码，包括宽度、背景色、边框等设置，可实现对GridView控件的美化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/*调用方式：GridView中加上属性 CssClass="mGrid" 即可     <asp:GridView CssClass="mGrid" ID="gvGuestBook" runat="server"></asp:GridView>*/
.mGrid {
    width: 600px;
    height: 100px;
    background-color: #05e75f;
    margin: 5px 0 10px 0;
    border: solid 1px #525252;
    border-collapse: collapse;
}
 
.mGrid td {
    padding: 2px;
    border: solid 1px #c1c1c1;
    color: #717171;
}
 
.mGrid th {
    padding: 4px 2px;
    color: #fff;
    background: #424242 url(grd_head.png) repeat-x top;
    border-left: solid 1px #525252;
    font-size: 0.9em;
}
 
.mGrid .alt {
    background: #fcfcfc url(grd_alt.png) repeat-x top;
}
 
.mGrid .pgr {
    background: #424242 url(grd_pgr.png) repeat-x top;
}
 
.mGrid .pgr table {
    margin: 5px 0;
}
 
.mGrid .pgr td {
    border-width: 0;
    padding: 0 6px;
    border-left: solid 1px #666;
    font-weight: bold;
    color: #fff;
    line-height: 12px;
}
 
.mGrid .pgr a {
    color: #666;
    text-decoration: none;
}
 
.mGrid .pgr a:hover {
    color: #000;
    text-decoration: none;
}