HTML table with fixed headers and a fixed column?

Javascript Problem Overview

Is there a CSS/JavaScript technique to display a long HTML table such that the column headers stay fixed on-screen and the first coloumn stay fixed and scroll with the data.

I want to be able to scroll through the contents of the table, but to always be able to see the column headers at the top and the first column on the left.

If there is a jQuery plugin that would be great! If it helps the only browser I care about is Firefox.

Javascript Solutions

Solution 1 - Javascript

Working example of link posted by pranav:

http://jsbin.com/nolanole/1/edit?html,js,output

FYI: Tested in IE 6, 7, & 8 (compatibility mode on or off), FF 3 & 3.5, Chrome 2. Not screen-reader-friendly (headers aren't part of content table).

EDIT 5/5/14: moved example to jsBin. This is old, but amazingly still works in current Chrome, IE, and Firefox (though IE and Firefox might require some adjustments to row heights).

Solution 2 - Javascript

The jQuery DataTables plug-in is one excellent way to achieve excel-like fixed column(s) and headers.

Note the examples section of the site and the "extras".
http://datatables.net/examples/
http://datatables.net/extras/

The "Extras" section has tools for fixed columns and fixed headers.

Fixed Columns
http://datatables.net/extras/fixedcolumns/
(I believe the example on this page is the one most appropriate for your question.)

Fixed Header
http://datatables.net/extras/fixedheader/
(Includes an example with a full page spreadsheet style layout: http://datatables.net/release-datatables/extras/FixedHeader/top_bottom_left_right.html)

Solution 3 - Javascript

You might be looking for this.

It has some known issues though.

Solution 4 - Javascript

I see this, although an old question, is a pretty good place to plug my own script:

http://code.google.com/p/js-scroll-table-header/

It just works with no configuration and is really easy to setup.

Solution 5 - Javascript

If what you want is to have the headers stay put while the data in the table scrolls vertically, you should implement a <tbody> styled with "overflow-y: auto" like this:

<table>
  <thead>
    <tr>
      <th>Header1</th>
       . . . 
    </tr>
   </thead>
   <tbody style="height: 300px; overflow-y: auto"> 
     <tr>
       . . .
     </tr>
     . . .
   </tbody>
 </table>

If the <tbody> content grows taller than the desired height, it will start scrolling. However, the headers will stay fixed at the top regardless of the scroll position.

Solution 6 - Javascript

In this answer there is also the best answer I found to your question:

https://stackoverflow.com/questions/673153/html-table-with-fixed-headers/673162#673162

and based on pure CSS.

Solution 7 - Javascript

I have created something which has fixed header, fixed footer, fixed left column and also fixed right column. This only works fine in IE. As most of the users are still using IE this can be helpful. Please find the code here in Scrollable Table. Please let me your suggestions.

Meanwhile I am working to fix columns in other browser. I will keep you posted. :-)

Solution 8 - Javascript

<script>
   $(document).ready(function () {
   $("#GridHeader table").html($('#<%= GridView1.ClientID %>').html());
   $("#GridHeader table tbody .rows").remove();
   $('#<%= GridView1.ClientID %> tr:first th').hide();
});
</script>
 
<div id="GridHeader">
    <table></table>
</div>

<div style="overflow: auto; height:400px;">
    <asp:GridView ID="GridView1" runat="server" />
</div>

Solution 9 - Javascript

Not quite perfect, but it got me closer than some of the top answers here.

Two different tables, one with the header, and the other, wrapped with a div with the content

<table>
  <thead>
    <tr><th>Stuff</th><th>Second Stuff</th></tr>
  </thead>
</table>
<div style="height: 600px; overflow: auto;">
  <table>
    <tbody>
      //Table
    </tbody>
  </table>
</div>

Solution 10 - Javascript

I know you can do it for MSIE and this limited example seems to work for firefox (not sure how extensible the technique is).

Solution 11 - Javascript

The first column has a scrollbar on the cell right below the headers

<table>
	<thead>
		<th> Header 1</th>
		<th> Header 2</th>
		<th> Header 3</th>
	</thead>
	<tbody>
		<tr>
			<td>
				<div style="width: 50; height:30; overflow-y: scroll"> 
					Tklasdjf alksjf asjdfk jsadfl kajsdl fjasdk fljsaldk 
					fjlksa djflkasjdflkjsadlkf jsakldjfasdjfklasjdflkjasdlkfjaslkdfjasdf
				</div>
			</td>
			<td>
				Hello world
			</td>
			<td> Hello world2
		</tr>
	</tbody>
</table>

Solution 12 - Javascript

YUI DataTable

I don't know if YUI DT has this feature but I won't be surprised if it does.

Solution 13 - Javascript

Here is a good jQuery plugin, working in all browsers!

You have a fixed header table without fixing its width.

Check it: https://github.com/benjaminleouzon/tablefixedheader

Disclaimer: I am the author of the plugin.

Content Type	Original Author	Original Content on Stackoverflow
Question	koogunmo	View Question on Stackoverflow
Solution 1 - Javascript	acatalept	View Answer on Stackoverflow
Solution 2 - Javascript	mg1075	View Answer on Stackoverflow
Solution 3 - Javascript	green_t	View Answer on Stackoverflow
Solution 4 - Javascript	raveren	View Answer on Stackoverflow
Solution 5 - Javascript	levik	View Answer on Stackoverflow
Solution 6 - Javascript	Marco Demaio	View Answer on Stackoverflow
Solution 7 - Javascript	Shahib	View Answer on Stackoverflow
Solution 8 - Javascript	Pat	View Answer on Stackoverflow
Solution 9 - Javascript	Ascherer	View Answer on Stackoverflow
Solution 10 - Javascript	MarkusQ	View Answer on Stackoverflow
Solution 11 - Javascript	Jaime Garcia	View Answer on Stackoverflow
Solution 12 - Javascript	ksuralta	View Answer on Stackoverflow
Solution 13 - Javascript	bln	View Answer on Stackoverflow