Introduction
In this post we will learn how to create scrollable Html table with fixed header with the help of css. Css has many properties through which we can achieve this task easily.
Have a Look
In previous articles we already done similar work with grid. Display data in Asp GridView in tabular form. Change grid view row color based on condition dynamically. Display progress image on Button click.
Practice
If you are working with asp.net application then add a simple Html form or you can do this same task with your aspx page. Here is my code for Html page with CSS.
Hope you familiar with CSS and this post will be really helpful for you. Here is the output
Have a Look
In previous articles we already done similar work with grid. Display data in Asp GridView in tabular form. Change grid view row color based on condition dynamically. Display progress image on Button click.
Practice
If you are working with asp.net application then add a simple Html form or you can do this same task with your aspx page. Here is my code for Html page with CSS.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Scrollable HTML table with CSS Style</title>
<style type="text/css">
table {
border-spacing: 0;
width: 100%;
}
td + td {
border-left: 1px solid #000;
}
td, th {
border-bottom: 1px solid #000;
background: #fff;
color: #000;
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;
}
section {
position: relative;
border: 1px solid #000;
padding-top: 37px;
background: #000099;
width: 40%;
}
.Maincontainer {
overflow-y: auto;
height: 200px;
}
</style>
</head>
<body>
<form id="form1">
<section class="">
<div class="Maincontainer">
<table>
<thead>
<tr class="header">
<th>Visitors Name<div>Visitors Name</div></th>
<th>Location<div>Location</div></th>
<th>Email<div>Email</div></th>
</tr>
</thead>
<tbody>
<tr>
<td>Mark Zuck</td>
<td>USA</td>
<td>mark@fb.com</td>
</tr>
<tr>
<td>Jack Dorsey</td>
<td>USA</td>
<td>jack@tw.com</td>
</tr>
<tr>
<td>Williamson</td>
<td>UK</td>
<td>will@gmail.com</td>
</tr>
<tr>
<td>Narendra Modi</td>
<td>India</td>
<td>modiji@hotmail.com</td>
</tr>
<tr>
<td>SRK King</td>
<td>India</td>
<td>srk@gmail.com</td>
</tr>
<tr>
<td>Reyna Seen</td>
<td>Virginia</td>
<td>ryna@gmail.com</td>
</tr>
<tr>
<td>Seen Paul</td>
<td>USA</td>
<td>seen@gmail.com</td>
</tr>
<tr>
<td>Dom</td>
<td>USA</td>
<td>dom@dom.com</td>
</tr>
</tbody>
</table>
</div>
</section>
</form>
</body>
</html>
|
Hope you familiar with CSS and this post will be really helpful for you. Here is the output
