Introduction:
Here I will explain how to implement scrollable html table body with fixed header columns using css styles with example or html table with fixed header and scrollable or scrolling body using css with example.
Description:
In previous articles I explained Best Login page design with html and css, jQuery add border to all images using css, change default text color selection using css, jQuery add multiple markers to google map from database, Show more link to shorten text and display it and many articles relating to html, css, jQuery, JavaScript and asp.net. Now I will explain how to implement html table with fixed header and scrollable body using css.
In previous articles I explained Best Login page design with html and css, jQuery add border to all images using css, change default text color selection using css, jQuery add multiple markers to google map from database, Show more link to shorten text and display it and many articles relating to html, css, jQuery, JavaScript and asp.net. Now I will explain how to implement html table with fixed header and scrollable body using css.
To implement html
table with fixed header and scrollable body using css
we need to write the code like as shown below
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Scrollable HTML table
with CSS Style</title>
<style type="text/css">
section {
position: relative;
border: 1px solid #000;
padding-top: 37px;
background: #B34C00;
width:40%;
}
.container {
overflow-y: auto;
height: 200px;
}
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;
}
</style>
</head>
<body>
<form id="form1">
<section class="">
<div class="container">
<table>
<thead>
<tr class="header">
<th>User Name<div>User Name</div></th>
<th>Education<div>Education</div></th>
<th>Location<div>Location</div></th>
</tr>
</thead>
<tbody>
<tr>
<td>Suresh Dasari</td><td>B.Tech</td><td>Chennai</td>
</tr>
<tr>
<td>Rohini Dasari</td><td>Msc</td><td>Chennai</td>
</tr>
<tr>
<td>Madhav Sai</td><td>MBA</td><td>Nagpur</td>
</tr>
<tr>
<td>Praveen Kumar</td><td>B.Tech</td><td>Guntur</td>
</tr>
<tr>
<td>Mahendra Dasari</td><td>CA</td><td>Chennai</td>
</tr>
<tr>
<td>Nagaraju Dasari</td><td>MCA</td><td>USA</td>
</tr>
<tr>
<td>Sateesh Alavala</td><td>MD</td><td>Vizag</td>
</tr>
<tr>
<td>Sudheer</td><td>B.Tech</td><td>Kakinada</td>
</tr>
</tbody>
</table>
</div>
</section>
</form>
</body>
</html>
|
Demo
For live demo check below table it’s having fixed
header columns with scrollable body
|
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
2 comments :
Hi Bro,
Nice post
it is working in chrome, not in IE why ?
How to make fixed footer too?
Note: Only a member of this blog may post a comment.