How to freeze header and left columns of the table - html

Question

I want to fix header and 3 left columns of my table.
But I found only one suitable solution. Here is link: http://hazaa.com.au/blog/how-to-create-an-html-table-with-frozen-headers-and-columns/
I need to divide my table to 4 independent tables and that's not good.
Also I found plugin http://www.fixedheadertable.com/ (as suggestion in another such question on SO) unfortunately it can freeze only one left column (I need 3 columns).
Are there any other simple ways to implement this feature?

Answer 1

the standard html table does not support frozen columns, even with css.
if you can use a jquery plugin, i suggest you to use http://www.datatables.net/ with the fixedcolumns plugin (just configure and it works as supposed :) )
if not, you will end up with u solution where you havo to split up the table in the one or the other way, and if you want to have scrollable tables you will have to use javascript since css and html do not support such features yet.

Answer 2

Thought I'd share how I've done this. This code is surely somewhat based off other code found on this site but have long since lost exactly where. Requires jQuery. Potentially doesn't support various odd things you might want to do to a table.
<div class='tableFreeze'>
<table>
<thead>
<tr><th>Headers</th><th>Go</th><th>Here</th></tr>
</thead>
<tbody>
<!--table body stuff goes here-->
</tbody>
</table>
</div>
<style>
.tableFreeze {
width: 800px;
max-height: 500px;
position: relative;
overflow: scroll;
}
</style>
<script>
$(document).ready(function(){
//Sets a table to have frozen headers, or both headers and first column
//A div around the table must have a class of 'tableFreeze'
//can also add class 'tableFreeze_headersOnly' to the div to specify only headers should be frozen
//Table inside of div must have one thead and one tbody
//can set the div to have custom CSS defining the width and max height
$('.tableFreeze').each(function(){
var div=$(this);
//get the table in the DIV
var table=div.children('table');
// save original width to table object
var table_original_width=table.width();
//do the same for each td or th in the header
table.find('thead tr td,thead tr th').each(function(){
$(this).attr("data-item-original-width",$(this).width());
});
//do the same for the heights of each first cell on the left
var table_original_height=table.height();
table.find('tr').each(function(){
$(this).find('td,th').eq(0).attr("data-item-original-height",$(this).find('td,th').eq(0).height());
});
//need a copy of the table to strip away and make it just the header
var table_header=table.clone();
//set the whole copy of this table to have the proper width
table_header.width(table_original_width);
//set width of all cells in the header
table_header.find('thead tr td,thead tr th').each(function(){
$(this).width($(this).attr("data-item-original-width"));
});
//remove the tbody
table_header.find('tbody').remove();
//set the width and height of this header bar. add a header class
table_header.css({'width':table_original_width,'height':table_header.find("td,th").first().attr('data-item-original-height'),"position":"absolute","left":0,"top":0}).addClass('tableFreeze_header');
//add to div
div.append(table_header);
//if we have this class, we don't need to do the rest
if ($(this).hasClass('tableFreeze_headersOnly')) return;
//another copy of the table for just the left bar
var table_leftcol=table.clone();
//go through each row (in both tbody and thead)
table_leftcol.find('tr').each(function(){
//remove all but the first cell
$(this).children('td,th').slice(1).remove();
//set the height of each cell to be the original height
$(this).children('td,th').height(($(this).children('td,th').attr("data-item-original-height")*1)+1);
});
//set: the height of the whole table based on the original height we got, the width based on the width set of the first cell, absolutely position it on the left and right, and an id for finding later
table_leftcol.css({'height':table_original_height,'width':table_leftcol.find("td,th").first().attr('data-item-original-width'),"position":"absolute","left":0,"top":0}).addClass('tableFreeze_leftcol');
//add to div
div.append(table_leftcol);
//and finally a similar thing for just the top left cell (a1). That will need to always be on the top left.
var table_a1=table.clone();
//set copy to be original table width
table_a1.width(table_original_width);
//get the width and height of the a1 cell
var table_a1_width=table_a1.find("thead tr td,thead tr th").eq(0).attr("data-item-original-width");
var table_a1_height=table_a1.find("thead tr td,thead tr th").eq(0).attr("data-item-original-height");
//remove all but the first cell in the header
table_a1.find("thead tr td,thead tr th").slice(1).remove();
//and remove the entire tbody
table_a1.find('tbody').remove();
//set the first (and should be only remaining) cell to have the proper width/height
table_a1.find("thead tr td,thead tr th").eq(0).width(table_a1_width).height(table_a1_height);
//table positionin' stuff
table_a1.css({'width':table_a1_width,'height':table_a1_height,"position":"absolute","left":0,"top":0}).addClass('tableFreeze_a1');
//add to div
div.append(table_a1);
});
});
</script>