aspdotnet-suresh offers articles and tutorials,csharp dot net, articles and tutorials,VB.NET Articles,Gridview articles,code examples of 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

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.

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 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="">
<title>Scrollable HTML table with CSS Style</title>
<style type="text/css">
section {
position: relative;
border: 1px solid #000;
padding-top: 37px;
background: #B34C00;
.container {
overflow-y: auto;
height: 200px;
table {
border-spacing: 0;
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;
<form id="form1">
<section class="">
<div class="container">
<tr class="header">
<th>User Name<div>User Name</div></th>
<td>Suresh Dasari</td><td>B.Tech</td><td>Chennai</td>
<td>Rohini Dasari</td><td>Msc</td><td>Chennai</td>
<td>Madhav Sai</td><td>MBA</td><td>Nagpur</td>
<td>Praveen Kumar</td><td>B.Tech</td><td>Guntur</td>
<td>Mahendra Dasari</td><td>CA</td><td>Chennai</td>
<td>Nagaraju Dasari</td><td>MCA</td><td>USA</td>
<td>Sateesh Alavala</td><td>MD</td><td>Vizag</td>


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,, 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


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

Other Related Posts

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