How to freeze header and left columns of the table

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

Answer 1

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>

Answer 2

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.