dùng css để design lại gridview trong asp.net

nhìn giao diện cái gridview của C# đơn điệu quá ta có thể dùng css định dạng lại nhìn cho thân thiện hơn như sau

B1: tạo css định dạng tên : dinhdanggridview.css (lưu ý ở đây mình định dạng lun cả phân trang và button của asp.net)





.grid

{

font:normal normal normal small normal Arial, Sans-Serif;

background-image:url('../Images/filter_row_bg') ;

background-repeat: repeat;



}

.grid td, .grid th

{

padding:5px;



}

.header

{

text-align:center;

color:Blue;

background-image:url(../images/sort_row_bg.gif) ;

background-repeat: repeat;

}

.row td

{

/* border-bottom:solid 1px ;*/



}

.alternating

{

background-color:#eeeeee;

}

.alternating td

{

/* border-bottom:solid 1px ;*/



}

.footer

{

height:50px;

text-align:center;

color:Blue;

background-image:url(../images/sort_row_bg.gif) ;

background-repeat: repeat;

}

.button

{

text-align:center;

color:Blue;

background-image:url('../images/sort_row_bg.gif') ;

background-repeat: repeat;

font-size: small;

font-family: "Times New Roman", Times, serif;

}

.button:hover

{

background-image:url('../images/sort_row_bg.gif') ;

border: solid 1px grey;

font-family: Arial, sans-serif;

font-size: 12px;

font-weight: bold;

color: Red;

height: 25px;

}

.pagination

{

line-height: 26px;

}

.pagination span

{

padding: 5px;

border: solid 1px #477B0E;

text-decoration: none;

white-space: nowrap;

background: yellow;

}

.pagination a,

.pagination a:visited

{

text-decoration: none;

padding: 6px;

white-space: nowrap;

}

.pagination a:hover,

.pagination a:active

{

padding: 5px;

border: solid 1px #9ECDE7;

text-decoration: none;

white-space: nowrap;

background: white;

}

B2: vào trang cần định dạng

- thêm css : <link rel="Stylesheet" href="CSS/dinhdanggridview.css" type="text/css"/>

- gọi css trong gridview:


<asp:GridView ID="GridView1" runat="server" Width="100%"

CssClass="grid"

HeaderStyle-CssClass="header"

FooterStyle-CssClass="footer"

RowStyle-CssClass="row"

AlternatingRowStyle-CssClass="alternating" ShowFooter="True"

onrowdatabound="GridView1_RowDataBound" AutoGenerateColumns="False"

>

</asp:GridView>




sau khi thực hiện các bước như trên ta được như hình