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.

Macdonell

Partial dup: #673653 – Digiovanni

Doesn't seems like a duplicate as this question requires fixed column as well. – Hickox

I voted to reopen this question out of principle. Dozens of upvotes and favorit'ing, apparently someone finds it useful. Yes it requires a long answer. That's what jfiddle and other similar tools are for. – Vieira

@KickingLettuce Popularity !== on-topic. If the question is reopened it will just be closed again. – Gulf

Google brought me to this question on my first searches, but the answers are outdated and not very satisfying. I eventually found the answer here: https://mcmap.net/q/76866/-table-with-fixed-header-and-fixed-column-on-pure-css – Basra

I don't see why this question is closed. The problem is clearly defined. The question should accept answers with potentially more modern techniques. – Fungi

Answer 1

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).

Bamford

doesn't work for me in winxp ie8 or ff3.6 – Dagmardagna

The link to the jQuery library hosted on jQuery.com changed, and their redirect was incorrect... so it stopped working in ALL browsers. I've fixed the link to point to the file on Google's servers instead - hopefully that one should be more reliable. – Bamford

Thanks. This helped me a lot. I had to modify the code to use setTimeout() to get it to work with larger tables, but this is a nice example. – Slipslop

Answer 2

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)

Fairly

note: from my experience (correct me if I'm wrong), it only works if all of your table cells have colSpan and rowSpan = 1. – Orelle

Answer 3

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.

Othella

I have a feeling that assigned unique ids to every row when there could be thousands of rows might not be the best solution. – Ogdan

Answer 4

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.

Bethought

thanks, that helps with the fixed header part but what about the fixed column? – Macdonell

overflow-y is ms specific. You'll have to use a plain overflow:auto. – Carmarthenshire

Would it be possible to do two colgroups and give the second one overflow:auto, to achieve the fixed first col? – Carmarthenshire

@levik: does not work in almost all browsers at least using HTML 5 DOCTYPE in standrad mode – Washer

This does not work... – Todhunter

@Thomas Ahie Good question, did you get any feedback? – Madaih

It doesn't work at all ! – Gallon

Answer 5

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

HTML table with fixed headers?

and based on pure CSS.

Washer

This seems to only fix the header row, not the left column. Also, it is useful to include code in answers. This answer leaves out the answer that only uses CSS. I'm not sure which answer it was referring to, but this is one that only uses CSS: https://mcmap.net/q/76865/-html-table-with-fixed-headers. – Jemimah

Answer 6

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. :-)

Peay

This isn't a great solution, IE has stopped supporting CSS expressions: msdn.microsoft.com/en-us/library/… – Steed

"most of the users are still using IE" LOL :D – Orelle

Answer 7

<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>

Alcaraz

Is it possible to use this method with "responsive" columns (no fixed width defined)? – Hoofbound

Answer 8

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>

Fagoting

Answer 9

In 2024, this is possible with just HTML and CSS: https://jsfiddle.net/47q0d6bu/3/

/* THE IMPORTANT BITS! */
table {
  /* Wide enough to go off the page */  
  width: 1000px;
}

thead th {
  position: sticky;
  top: 0;
}

th:first-child {
  position: sticky;
  left: 0;
  /* Makes the top left corner cover the other column headers */
  z-index: 2;
}



/* Visual clarity */
th { background: #93E9BE; }
td { background: #CECECE; }
th:first-child { background: #FFFFC2 }
/* Prettier spacing */
thead { text-align: left; }
td, th { padding-left: 1em; height: 5em; }
th:first-child { padding-left: 0; }

<table>
<tbody>
  <thead>
    <tr>
      <th></th>
      <th>Column 1 header</th>
      <th>Column 2 header</th>
      <th>Column 3 header</th>
      <th>Column 4 header</th>
    </tr>
  </thead>
</tbody>
  <tr>
    <th>Row 1 header</th>
    <td>Data 1.1</td>
    <td>Data 2.1</td>
    <td>Data 3.1</td>
    <td>Data 4.1</td>
  </tr>
  <tr>
    <th>Row 2 header</th>
    <td>Data 1.2</td>
    <td>Data 2.2</td>
    <td>Data 3.2</td>
    <td>Data 4.2</td>
  </tr>
  <tr>
    <th>Row 3 header</th>
    <td>Data 1.3</td>
    <td>Data 2.3</td>
    <td>Data 3.3</td>
    <td>Data 4.3</td>
  </tr>
  <tr>
    <th>Row 4 header</th>
    <td>Data 1.4</td>
    <td>Data 2.4</td>
    <td>Data 3.4</td>
    <td>Data 4.4</td>
  </tr>
</table>

Jemimah

Answer 10

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

Overblown

First linked didn't work for me. Second one does now show how to produce fixed first column. – Dagmardagna

Both links in answer are dead. – Trackman

Answer 11

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>

Fourpenny

I think you've misunderstood what's being asked. We want to be able to scroll to different cells in a (large) table. – Dagmardagna

Answer 12

YUI DataTable

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

Landscape

Thanks I took a look at that. It does have a scrolling table but that does have a fixed header but not the fixed coloumn that I need. developer.yahoo.com/yui/examples/datatable/dt_fixedscroll.html – Macdonell

yeah, I couldn't find that either from their list of examples. – Dagmardagna

Answer 13

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.

Epitome

Guess, the correct URL here would be fixedheadertable.com – Monroemonroy