GridView Code in aspx Page
<asp:GridView ID="grdvAttendance" runat="server" AutoGenerateColumns="False" GridLines="None"
AllowPaging="true"
CssClass="gridview"
PagerStyle-CssClass="gridview_pager"
AlternatingRowStyle-CssClass="gridview_alter"
PageSize="5"
OnPageIndexChanging="gridView_PageIndexChanging">
<AlternatingRowStyle CssClass="gridview_alter"></AlternatingRowStyle>
<Columns>
<asp:BoundField DataField="SlNo"
HeaderText="Sl.
No" Visible="false"
/>
<asp:BoundField DataField="EmployeeID"
HeaderText="Employee
ID" />
<asp:BoundField DataField="WorkingDate"
DataFormatString="{0:
MMM -dd, yyyy}" HeaderText="Date" />
<asp:BoundField DataField="EmployeeInTime"
HeaderText="In
Time" />
<asp:BoundField DataField="EmployeeOutTime"
HeaderText="Out
Time" />
<asp:BoundField DataField="LateAttendance"
HeaderText="L.
A." />
<asp:BoundField DataField="LateAttendanceDuration"
HeaderText="Duration"
/>
<asp:BoundField DataField="EarlyLeave"
HeaderText="E.
L." />
<asp:BoundField DataField="EarlyLeaveDuration"
HeaderText="Duration"
/>
<asp:BoundField DataField="WorkingHours"
HeaderText="Working
Hours" />
<asp:BoundField DataField="OverTime"
HeaderText="O.
T." />
<asp:BoundField DataField="OverTimeDuration"
HeaderText="Duration"
/>
</Columns>
<PagerStyle CssClass="gridview_pager"></PagerStyle>
</asp:GridView>
CSS Code to style the GridView
.gridview
{
width: 100%;
background-color: #fff;
margin: 5px 0 10px 0;
border: solid 1px #525252;
border-collapse:collapse;
}
.gridview td
{
padding: 2px;
border: solid 1px #c1c1c1;
color: #717171;
}
.gridview th
{
padding: 4px 2px;
color: #fff;
background: #424242;
border-left: solid 1px #525252;
font-size: 0.9em;
}
.gridview .gridview_alter
{
background: #E7E7E7;
}
.gridview .gridview_pager
{
background: #424242;
}
.gridview .gridview_pager
table
{
margin: 5px 0;
}
.gridview .gridview_pager
td
{
border-width: 0;
padding: 0 6px;
border-left: solid 1px #666;
font-weight: bold;
color: #fff;
line-height: 12px;
}
.gridview .gridview_pager
a
{
color: #666;
text-decoration: none;
}
.gridview .gridview_pager
a:hover
{
color: #000;
text-decoration: none;
}
Output of the Gridview after Implement Style
