HTML table with fixed headers and a fixed column?

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

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)

In 2024, this is possible with just HTML and CSS: https://jsfiddle.net/8oyj42nL/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;
  /* Make the top left corner cover the other column headers */
  z-index: 2;
}

thead th:first-child {
  /* Make the top left corner cover the other row headers */
  z-index: 3;
}



/* Visual clarity */
th { background: #93E9BE; }
td { background: #CECECE; }
th:first-child { background: #FFFFC2 }
thead th:first-child { background: purple; }

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

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.

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

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>

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

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>

YUI DataTable

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