Here Micheal provided a simple example for gridview custom css
Here simple example for
Gridview custom design with alternate row colour on mouse hover.
Separate color for header.
HTML
Code:
Copy the HTML code and paste it in your
design page.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<div align="center">
<h4>
The&nbs
p;Developer Tips - Beyond the Knowledge</h4>
<h2>
ExcelSh
eet content in GridView</h2>
<asp:GridView ID="grdContent" runat="server" Width="50%" CssClass="mygrdContent" PagerStyle-
CssClass="pager" HeaderStyle-CssClass="header" RowStyle-
CssClass="rows"
AllowPaging="True">
</asp:GridView>
</div>
</div>
</form>
</body>
</html>
CSS:
Copy the CSS code and paste it in your design
page.
<style>
.grdContent
{
width: 80%;
border: solid 2px black;
min-width: 80%;
}
.header
{
background-color: #646464;
font-family: Arial;
color: White;
border: none 0px transparent;
height: 25px;
text-align: center;
font-size: 16px;
}
.rows
{
background-color: #fff;
font-family: Arial;
font-size: 14px;
color: #000;
min-height: 25px;
text-align: left;
border: none 0px transparent;
}
.rows:hover
{
background-color: #ff8000;
font-family: Arial;
color: #fff;
text-align: left;
}
.selectedrow
{
background-color: #ff8000;
font-family: Arial;
color: #fff;
font-weight: bold;
text-align: left;
}
.mydatagrid a /** FOR THE PAGING ICONS **/
{
background-color: Transparent;
padding: 5px 5px 5px 5px;
color: #fff;
text-decoration: none;
font-weight: bold;
}
.mygrdContent a:hover /** FOR THE PAGING ICONS HOVER STYLES**/
{
background-color: #000;
color: #fff;
}
.mygrdContent span /** FOR THE PAGING ICONS CURRENT PAGE INDICATOR **/
{
background-color: #c9c9c9;
color: #000;
padding: 5px 5px 5px 5px;
}
.pager
{
background-color: #646464;
font-family: Arial;
color: White;
height: 30px;
text-align: left;
}
.mygrdContent td
{
padding: 5px;
}
.mygrdContent th
{
padding: 5px;
}
</style>
Sample Result:
Here I gave simple example for gridview
custom design. Thanks.