Freeze TH header and scrolling data

Question

I have a html table and I want to freeze the header row th tag for scrolling the data. How I can do that? Does I need to use the Dom? Thanks !!

Answer 1

My solution is to use two tables and fix the column widths. The lower table is in a scrollable div and has no header.

Answer 2

If you take Accessibility seriously, two tables is not the way to go since it breaks rules.

There are ways to do it in pure CSS, but it is a headache to get it to work in all browsers. There are a few examples out on the net, but they do not all work 100% with IE without tweaks.

I am currently working on a CSS only version, this is getting pretty close: http://www.coderanch.com/t/431995/HTML-JavaScript/Table-with-fixed-header-scolling#1918825

Does not work in IE8rc1 yet, IE6/7 has a border issue and you have to live with the scrollbar looking different in FF vs IE.

Answer 3

With FireFox, you can put style="height: 200px; overflow-y: auto" But to have a pure CSS version compatible with all major browsers, I've use this example since IE doesn't support syles in tbody or thead.

Answer 4

I have come up with a solution that sort of combines two previously mentioned ones. It uses jQuery and two tables , one for the header and one for the content. The header table is set to a width of 100% with no column widths set. At the bottom of the content table there is a row defined to match the header table with the column widths set. This row is hidden so that it is not shown, but retains the column widths.

For this example I gave my header row an ID of 'Header1' and the bottom row and ID of 'Header2'. Also I wrapped the content table inside a div with an ID of 'scrollTable'.

I set styles in my CSS file for the scrollTable ID, see below:

    #scrollTable {
 height:250px;
 overflow-x:hidden;
 overflow-y:scroll;
    }

Now for the jQuery part. Basically what I'm doing here is taking the widths of the bottom row columns and setting the header columns to match. I stretch the width of the last column of the header so that it fits over the top of the scroll bar. See code below:

   $(document).ready(function(){
 var maxWidth = $('#Header1').width();    // Get max row Width
 $('#Header2 th').each(function(i) {     // Set col headers widths to to match col widths 
      var width = $(this).width();
      $('#Header1 th').eq(i).width(width);
 });

 var blankSpace = maxWidth - $('#Header1').width();               // Calculate extra space
 $('#Header1 th:last').width( $('#Header1 th:last').width() + blankSpace );  // Stretch last header column to fill remaining space

});

I have tested this successfully on IE 6, 7 & 8, Firefox 3.0.1.4, Chrome 3.0.195.25, Opera 10, and Safari 3.2.2 on Windows XP.