Lock TH header and data scrolling

Question

I have an html table and I want to freeze the title tag of the header to scroll through the data. How can i do this? Do I need to use Dom? Thanks!

Answer 1

My solution is to use two tables and fix the width of the columns. The bottom table is in a scrollable div and has no title.

Answer 2

If you are serious about accessibility, two tables are not suitable, as it violates the rules.

There are ways to do this in pure CSS, but this is a headache to get it working in all browsers. There are several examples on the net, but not all of them work 100% with IE without tricks.

I'm currently working on a CSS-only version, it's pretty close: http://www.coderanch.com/t/431995/HTML-JavaScript/Table-with-fixed-header-scolling#1918825

It doesn’t work in IE8rc1, IE6 / 7 has a border problem, and you need to live using scrollbars that look different in FF and IE.

Answer 3

With FireFox you can put style = "height: 200px; overflow-y: auto" But in order to have a clean CSS version compatible with all major browsers, I use this example because IE does not support syles in tbody or thead.

Answer 4

I came up with a solution that combines the two previously mentioned. It uses jQuery and two tables: one for the header and one for the content. The header table is 100% wide without setting the column width. At the bottom of the content table there is a row defined to match the header table with the specified column widths. This row is hidden so that it is not displayed, but retains the width of the column.

In this example, I gave the header line ID 'Header1', and the bottom line ID 'Header2'. I also wrapped the content table inside a div with the id "scrollTable".

I set the 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 width of the columns of the bottom rows and setting the header columns. I am stretching the width of the last column of the title so that it fits into the top of the scroll bar. See the following code:

  $(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 successfully tested this on IE 6, 7 and 8, Firefox 3.0.1.4, Chrome 3.0.195.25, Opera 10 and Safari 3.2.2 on Windows XP.

Answer 5

I have done this in the past with CSS, defining the height for the <TBODY> in my table and using overflow:auto . It was a long time ago, and I think there were compatibility issues. I don’t remember exactly what they were, but this solution may work for your problem.

Answer 6

the best solution (one that scales with a lot of data) is to use two tables such as aaron, the top table has headers, and the bottom table should contain headers as the last row (or footer) but with opacity 0, so you don’t can see them.

These headings below make the bottom table the same column width as the top table, forcing things to line up. make sure the style and header and footer match.

You will also have to create a separate scrollbar for vertical scrolling to the right of the table, because otherwise the scrollbar will ruin your widths. add a scroll event listener to set the scrolltop of the table to scrolltop of the scrollbar, and resize the scrollbar to the same height as the table.

its pretty easy really =)

Answer 7

Create a single table, as usual, to solve availability problems. Dynamically create a new table based on thead using jQuery (copy thead) and paste it on the page above the first table and give it a fixed position. It should remain in place while the rest of the table scrolls, but it will still be available and will work with JavaScript turned off.

Answer 8

Have you tried this plugin from jQuery? http://plugins.jquery.com/project/floatobject I believe this does what you want. Check out the demo @ http://amirharel.com/labs/fo/float_demo.html Cheers!