HTML table with fixed headers and a fixed column

Question

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

User · Answer

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   lt table gt     lt thead gt       lt tr gt  lt th gt Stuff lt  th gt  lt th gt Second Stuff lt  th gt  lt  tr gt     lt  thead gt   lt  table gt   lt div style  height  600px  overflow  auto   gt     lt table gt       lt tbody gt          Table      lt  tbody gt     lt  table gt   lt  div gt

User · Answer

lt script gt       document  ready function             GridHeader table   html      lt    GridView1 ClientID   gt    html            GridHeader table tbody  rows   remove            lt    GridView1 ClientID   gt  tr first th   hide         lt  script gt    lt div id  GridHeader  gt       lt table gt  lt  table gt   lt  div gt    lt div style  overflow  auto  height 400px   gt       lt asp GridView ID  GridView1  runat  server    gt   lt  div gt

User · Answer

The first column has a scrollbar on the cell right below the headers   lt table gt       lt thead gt           lt th gt  Header 1 lt  th gt           lt th gt  Header 2 lt  th gt           lt th gt  Header 3 lt  th gt       lt  thead gt       lt tbody gt           lt tr gt               lt td gt                   lt div style  width  50  height 30  overflow-y  scroll  gt                       Tklasdjf alksjf asjdfk jsadfl kajsdl fjasdk fljsaldk                      fjlksa djflkasjdflkjsadlkf jsakldjfasdjfklasjdflkjasdlkfjaslkdfjasdf                  lt  div gt               lt  td gt               lt td gt                  Hello world              lt  td gt               lt td gt  Hello world2          lt  tr gt       lt  tbody gt   lt  table gt

User · Answer

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

User · Answer

In this answer there is also the best answer I found to your question    HTML table with fixed headers   and based on pure CSS

User · Answer

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   -

User · Answer

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

User · Answer

If what you want is to have the headers stay put while the data in the table scrolls vertically  you should implement a  lt tbody  styled with  overflow-y  auto  like this    lt table gt     lt thead gt       lt tr gt         lt th gt Header1 lt  th gt                     lt  tr gt      lt  thead gt      lt tbody style  height  300px  overflow-y  auto  gt         lt tr gt                     lt  tr gt                 lt  tbody gt    lt  table gt    If the  lt 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

User · Answer

You might be looking for this    It has some known issues though

User · Answer

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

User · Answer

Working example of link posted by pranav   http   jsbin com nolanole 1 edit html js output  FYI  Tested in IE 6  7   amp  8  compatibility mode on or off   FF 3  amp  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

User · Answer

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

User · Answer

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

[javascript] HTML table with fixed headers and a fixed column?

Examples related to javascript

Examples related to html

Examples related to css

Examples related to html-table