Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Scrollable HTML Table Body with Fixed Header using CSS with Example

Mar 29, 2015
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.

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


Scrollable HTML Table Body with Fixed Header using CSS with Example

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 RSS subscribe by email Subscribe by Email

2 comments :

Rajkumar Palnati said...

Hi Bro,
Nice post
it is working in chrome, not in IE why ?

Vishnu jayaraj s said...

How to make fixed footer too?

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.