Fixed Table Header with Plain JAVAScript and CSS

Sometimes, you want to keep the HTML Table Header fixed and content to be scrollable.

At present, many plugins are avaialble in the market that uses JQery or Mootools or any other javascript library. However, sometimes you may not want to use this plugin becuase it may contain some extra features that you do not want to load un necessary to increase the page load time.


We have created this feature with simple javascript and css.

JAVAScript and CCS:


<style type="text/css">
<!--
#fixedHdr, #scrollBody {
    display: block;
}
#scrollBody {
	height: 100px;
	overflow: auto;
}
-->
</style>

<script language="javascript" type="text/javascript">
window.onload = function() {
	fixedHdrTable();
}
function fixedHdrTable() {
	var table = document.getElementById("fixedHeaderTable");
	var orginalWidth = table.offsetWidth;
	var headerColumns = new Array();
	var hdrRow = table.rows[0];
	for (var k = 0; k < hdrRow.cells.length; k++) {
		headerColumns[k] = hdrRow.cells[k].clientWidth;
	}
	for (var i = 1, row; row = table.rows[i]; i++) {
	   for (var j = 0, col; col = row.cells[j]; j++) {
		   var width = row.cells[j].clientWidth;
		   if(headerColumns[j] < width) {
		      headerColumns[j] = width;
		   }
	   } 
	}
	
	var row = table.rows[1];
	for (var j = 0, col; col = row.cells[j]; j++) {
		row.cells[j].style.cssText = "width : "+headerColumns[j]+"px !important; padding-left : 2px !important; padding-right : 0px !important;";
	} 
	
	for (var j = 0, col; col = hdrRow.cells[j]; j++) {
		var computedWidth = getComputedStyle(table.rows[1].cells[j], null).width;
		hdrRow.cells[j].style.cssText = "width : "+parseInt(computedWidth)+"px !important; padding-left : 2px !important; padding-right : 0px !important;";
	}
	
	var bodyWidth = table.rows[1].clientWidth;
	if(document.getElementById('scrollBody').scrollHeight > document.getElementById('scrollBody').clientHeight) {
		bodyWidth = bodyWidth + 17;
	}
	
	var factor = orginalWidth / bodyWidth;
	
	
	var row = table.rows[1];
	for (var j = 0, col; col = row.cells[j]; j++) {
		row.cells[j].style.cssText = "width : "+(headerColumns[j] * orginalWidth / bodyWidth)+"px !important; padding-left : 2px !important; padding-right : 0px !important;";
	} 
	
	for (var j = 0, col; col = hdrRow.cells[j]; j++) {
		var computedWidth = getComputedStyle(table.rows[1].cells[j], null).width;
		hdrRow.cells[j].style.cssText = "width : "+parseInt(computedWidth)+"px !important; padding-left : 2px !important; padding-right : 0px !important;";
	}
	
	var hdrWidth = table.rows[0].clientWidth;
	var lastHdr = hdrRow.cells[hdrRow.cells.length - 1];
	var currentWidth = lastHdr.clientWidth;
	lastHdr.style.cssText = "width : "+(currentWidth + orginalWidth - hdrWidth - 4)+"px !important; padding-left : 2px !important; padding-right : 0px !important;";
}

</script>



HTML Table:



<table border="0" cellpadding="3" cellspacing="1" align="center" id="fixedHeaderTable">

<thead id="fixedHdr">
  <tr>
 	<th> No.</th>
        <th> Name </th>
        <th> Price</th>
        <th> Description</th>
 </tr>
</thead>

<tbody id="scrollBody">
<tr>
        <td> 1</td>
        <td> Pen</td>
        <td> $3.50</td>
        <td> Raynold's Pen</td>
</tr>
<tr>
        <td> 2</td>
        <td> Shirt</td>
        <td> $25.50</td>
        <td> Arrow's Plain Shirt</td>
</tr>
<tr>
        <td> 3</td>
        <td> Note Book</td>
        <td> $1.50</td>
        <td> Apekshit's JAVA Tutorial Book</td>
</tr>
<tr>
        <td> 4</td>
        <td> JAVAScript Tutorial</td>
        <td> $101.00</td>
        <td> Apekshit's JAVAScript Tutorial For Beginners with examples</td>
</tr>
<tr>
        <td> 5</td>
        <td> JAVA Tutorial</td>
        <td> $201.00</td>
        <td> Apekshit's JAVA Tutorial For Beginners with examples</td>
</tr>
<tr>
        <td> 6</td>
        <td> SQL Tutorial</td>
        <td> $151.00</td>
        <td> Apekshit's SQL Tutorial For Beginners with examples</td>
</tr>
<tr>
        <td> 7</td>
        <td> HTML Tutorial</td>
        <td> $101.00</td>
        <td> Apekshit's HTML Tutorial For Beginners with examples</td>
</tr>
<tr>
        <td> 8</td>
        <td> JSP Tutorial</td>
        <td> $101.00</td>
        <td> Apekshit's JSP Tutorial For Beginners with examples</td>
</tr>
<tr>
        <td> 9</td>
        <td> JDBC Tutorial</td>
        <td> $101.00</td>
        <td> Apekshit's JDBC Tutorial For Beginners with examples</td>
</tr>
</tbody>
</table>

As you can see above, we have created css, javascript and html table.

The Table has header and body. Body has fixed height of 100px defined in CSS. Header is kept fixed. On page load, javascript function is called that gets Table using its id and does some calcualation.


Code in Action:

No. Name Price Description
1 Pen $3.50 Raynold's Pen
2 Shirt $25.50 Arrow's Plain Shirt
3 Note Book $1.50 Apekshit's JAVA Tutorial Book
3 Note Book $1.50 Apekshit's JAVA Tutorial Book
3 Note Book $1.50 Apekshit's JAVA Tutorial Book
4 JAVAScript Tutorial $101.00 Apekshit's JAVAScript Tutorial For Beginners with examples
5 JAVA Tutorial $201.00 Apekshit's JAVA Tutorial For Beginners with examples
6 SQL Tutorial $151.00 Apekshit's SQL Tutorial For Beginners with examples
7 HTML Tutorial $101.00 Apekshit's JAVAScript Tutorial For Beginners with examples
8 JSP Tutorial $101.00 Apekshit's JSP Tutorial For Beginners with examples
9 JDBC Tutorial $101.00 Apekshit's JDBC Tutorial For Beginners with examples