I create a lot of web-application list-screens with fixed-headers. I prefer to *not* work with a THEAD for this purpose because it is too limiting for complex page layouts. Instead, I create TWO tables - one for the headers and one for the content. This works well as long as you use table-layout:fixed and set specific column widths - I use a combo of fixed and percentage widths so that the tables will always auto-size to fill the page-width. Here is a simple example...
<div style="overflow-y: scroll;"> <table style="table-layout: fixed"> <col style="width: 10ex;"> <col style="width: 20ex;"> <col width="30%"> <col width="70%"> <col style="width: 24px;"> <tr> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> <td>Column 4</td> <td>Column 5</td> </tr> </table> </div> <div style="overflow-y: scroll; height: 300px;"> <table style="table-layout: fixed"> <col style="width: 10ex;"> <col style="width: 20ex;"> <col width="30%"> <col width="70%"> <col style="width: 24px;"> <tr> <td>Data 1.1</td> <td>Data 1.2</td> <td>Data 1.3</td> <td>Data 1.4</td> <td>Data 1.5</td> </tr> <tr> <td>Data 2.1</td> <td>Data 2.2</td> <td>Data 2.3</td> <td>Data 2.4</td> <td>Data 2.5</td> </tr> <tr> <td>Data 3.1</td> <td>Data 3.2</td> <td>Data 3.3</td> <td>Data 3.4</td> <td>Data 3.5</td> </tr> </table> </div> Note that you need to set BOTH the header and content tables to overflow-y:scroll so that both containers have a scrollbar - even though the headers will not actually scroll. Without matching scrollbar, percentage column-widths would not line-up correctly. For IE, you can color the header-scrollbar with CSS so it is essentially 'invisible'. You can use any page-structure you want to control the height of the scrolling list. Separating the header markup from the list-markup provides a lot more options. This is compatible with a table-sorter because the 'list' is in a table by itself, so it is *impossible* for sorting or striping to affect your headers. It is also useful for Ajax - you can replace the entire data-table for maximum rendering speed. FYI, using table-layout:fixed also makes pages with large tables load MUCH FASTER because the browser does not have to wait for all the content to load before starting to render the table. The bigger the table, the more noticeable this improvement is. Hope that helps. /Kevin On Oct 2, 5:03 pm, lcplben <b...@sellmycalls.com> wrote: > On Sep 16, 2:16 am, macsig <sigbac...@gmail.com> wrote: > > > Hello guys, > > I'd like to know if there is a way to keep a table header fixed on top > > of a div while I scroll the table rows. > > I have a div high 200px and the table itself is around 300px so when I > > scroll down I'd like to always see the header on top. > > I already use for the table tablesorter so the solution must be > > compatible with that plug-in.