How do I freeze the first and last columns of an html table in a scrollable div?

Question

I have a table which has a header row, but also a header column and a total column with several columns in between.

Something like this:

Name    Scor         


        

Answer 1

I've experimented with a few methods (thanks to everyone who helped) and here's what I've come up with using jQuery. It seems to work well in all browsers I tested. Feel free to take it and use it however you wish. Next step for me will be turning it into a reusable jQuery plugin.

Summary:

I started with a normal table with everything in it (Id="ladderTable"), and I wrote Three methods - one to strip the first column, one to strip the last column, and one to fix the row heights.

The stripFirstColumn method creates a new table (Id="nameTable"), traverses the original table and takes out the first column, and adds those cells to the nameTable.

The stripLastColumn method does basically the same thing, except it takes out the last column and adds the cells to a new table called totalTable.

The fixHeights method looks at each row in each table, calculates the maximum height, and applies it to the related tables.

In the document ready event, I called all three methods in order. Note that all three tables float left so they'll just stack horizontally.

The HTML Structure:

Current Ladder
 
 
 
     ...  ... 
           ... (more scores)
    

        
 
            
Name
Round 1
Round 50
Total
        
        
Bob
11
75
421

 

The jQuery:

function stripFirstColumn() {                
    // pull out first column:
    var nt = $('');
    $('#ladderTable tr').each(function(i)
    {
        nt.append(''+$(this).children('td:first').html()+'');
    });
    nt.appendTo('#nameTableSpan');
    // remove original first column
    $('#ladderTable tr').each(function(i)
    {
        $(this).children('td:first').remove();
    });
    $('#nameTable td:first').css('background-color','#8DB4B7');
}

function stripLastColumn() {                
    // pull out last column:
    var nt = $('');
    $('#ladderTable tr').each(function(i)
    {
        nt.append(''+$(this).children('td:last').html()+'');
    });
    nt.appendTo('#totalTableSpan');
    // remove original last column
    $('#ladderTable tr').each(function(i)
    {
        $(this).children('td:last').remove();
    });
    $('#totalTable td:first').css('background-color','#8DB4B7');
}

function fixHeights() {
    // change heights:
    var curRow = 1;
    $('#ladderTable tr').each(function(i){
        // get heights
        var c1 = $('#nameTable tr:nth-child('+curRow+')').height();    // column 1
        var c2 = $(this).height();    // column 2
        var c3 = $('#totalTable tr:nth-child('+curRow+')').height();    // column 3
        var maxHeight = Math.max(c1, Math.max(c2, c3));

        //$('#log').append('Row '+curRow+' c1=' + c1 +' c2=' + c2 +' c3=' + c3 +'  max height = '+maxHeight+'
');

        // set heights
        //$('#nameTable tr:nth-child('+curRow+')').height(maxHeight);
        $('#nameTable tr:nth-child('+curRow+') td:first').height(maxHeight);
        //$('#log').append('NameTable: '+$('#nameTable tr:nth-child('+curRow+')').height()+'
');
        //$(this).height(maxHeight);
        $(this).children('td:first').height(maxHeight);
        //$('#log').append('MainTable: '+$(this).height()+'
');
        //$('#totalTable tr:nth-child('+curRow+')').height(maxHeight);
        $('#totalTable tr:nth-child('+curRow+') td:first').height(maxHeight);
        //$('#log').append('TotalTable: '+$('#totalTable tr:nth-child('+curRow+')').height()+'
');

        curRow++;
    });

    if ($.browser.msie)
        $('#ladderDiv').height($('#ladderDiv').height()+18);
}

$(document).ready(function() {
    stripFirstColumn();
    stripLastColumn();
    fixHeights();
    $("#ladderDiv").attr('scrollLeft', $("#ladderDiv").attr('scrollWidth'));    // scroll to the last round
});

If you have any questions or if there's anything that wasn't clear, I'm more than happy to help.

It took me quite a while to work out that there was nothing that I could really reuse and it took a bit longer to write this. I'd hate for someone to go to the same trouble.