Scrollable Table With Fixed Header in asp.net C#
In this article I have design a
table with fixed header, many time we want to save the values in variable but
header is fixed so that we can easily read the values and easy to match the
values.
Design:-
Source Codes:-
<%@
Page Language="C#" AutoEventWireup="true" CodeFile="Scrollablehtmlwithfixedheader.aspx.cs"
Inherits="Scrollablehtmlwithfixedheader" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Scrollable
Table With Fixed Header</title>
<style type="text/css">
section
{
position:
relative;
border:
1px solid #000;
padding-top:
37px;
background:
blue;
width:
40%;
}
.container
{
overflow-y:
auto;
height:
200px;
}
table
{
border-spacing:
0;
width:
100%;
}
td + td1
{
border-left:
1px solid #000;
}
td, th
{
border-bottom:
1px solid #000;
background:
lightblue;
color:
black;
padding:
10px 25px;
}
th
{
height:
0;
line-height:
0;
padding-top:
0;
padding-bottom:
0;
color:
transparent;
border:
none;
white-space:
nowrap;
}
th div
{
position:
absolute;
background:
transparent;
color:
#fff;
padding:
9px 25px;
top:
0;
margin-left:
-25px;
line-height:
normal;
border-left:
1px solid #800;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<section>
<div class="container">
<table>
<thead>
<tr class="header">
<th><div>Name</div></th>
<th><div>Gender</div></th>
<th><div>Location</div></th>
</tr>
</thead>
<tbody>
<tr>
<td>Neeraj
Srivastava</td>
<td>Male</td>
<td>Aligarh</td>
</tr>
<tr>
<td>Dheeraj
Srivastava</td>
<td>Male</td><td>Lucknow</td>
</tr>
<tr>
<td>Ritesh</td><td>Male</td><td>Kanpur</td>
</tr>
<tr>
<td>Meenakshi Pandey</td><td>Female</td><td>Lucknow</td>
</tr>
<tr>
<td>Sanjay Kumar
Yadav</td><td>Male</td><td>Aligarh</td>
</tr>
<tr>
<td>Rina Srivastava</td>
<td>Female</td>
<td>Delhi</td>
</tr>
<tr>
<td>Praveen Singh</td>
<td>Male</td>
<td>Lucknow</td>
</tr>
<tr>
<td>Navneet Singh</td>
<td>Male</td>
<td>Delhi</td>
</tr>
</tbody>
</table>
</div>
</section>
</form>
</body>
</html>
Out-Put
Scrollable Table With Fixed Header in asp.net C#
Reviewed by NEERAJ SRIVASTAVA
on
3:27:00 PM
Rating:
Reviewed by NEERAJ SRIVASTAVA
on
3:27:00 PM
Rating:
No comments: