Fixed Header and Fixed First Column of a HTML Table using jQuery

Sometimes when designing a table in html page we find a lot of columns for a table which exceeds the width of the page. In this case the horizontal scrollbar of the browser come into play. But when we scroll the horizontal scroll bar we can not see the first column which generally contains the identifier(primary key) of that record. We can view the data but can not recognize the data of which record. Here we need the first column(identifier column) to be fixed and only the data should move with the horizontal scroll.

Similarly when we have a lot of records in the table, the vertical scroll bar comes into play. When we scroll vertically, the header goes up and we can not see the header, only we can see the data. So in this case we can view the data but we find difficulty to know the data is of which column. So here we need to kepe the header fixed, so that only data can move when we use the vertical scroll bar.

Here is a simple code to make the header and first column of the html table fixed using lasso inline for fetching records.

    
        Opal Task Test1
        
        
            $(document).ready(function()
            {
                fnAdjustTable();
            });
            
            fnAdjustTable=function()
            {
                var colCount=$('#firstTr>td').length; //get total number of column
                var m=0;
                var n=0;
                var brow='mozilla';
                jQuery.each(jQuery.browser, function(i, val)
                {
                    if(val==true)
                    {
                        brow=i.toString();
                    }
                });
                $('.tableHeader').each(function(i)
                {
                    if(m