Keeping a certain row or column in an HTML table fixed

Question

I have huge amounts of data populating an HTML <table> having more than 200 rows and 200 columns.

However, when i scroll the page horizontally or vertically to view the data, the header columns (like th for instance) go beyond the page.

How can i scroll through the table and still keep the top row and leftmost column fixed so that i will always know what data im seeing.

Answer 1

Here is a good solution: http://www.imaputz.com/cssStuff/bigFourVersion.html

Although implementing a JavaScript/jQuery solutions opens a lot more doors.

See this SO post for more info: http://stackoverflow.com/questions/673153/html-table-with-fixed-headers

Answer 2

You can use jQuery or you can try to mix the solution below:

header: http://fixed-header-using-jquery.blogspot.com/2009/05/scrollable-table-with-fixed-header-and.html

header and first column too but still in beta: http://fixedheadertable.mmalek.com

Just the first column fixed: http://www.java2s.com/Code/HTMLCSS/Table-Style/Fixedtablefirstcolumn.htm

Answer 3

Use simple solutions when they exist. :)
You can use a tbody and give it either fixed height or max-height and overflow: auto;:

CSS:

tbody {
  max-height: 500px;
  max-width: 100%;
  overflow: auto;
}

And HTML like so:

<table>
<thead>
<tr><th>headers</th></tr>
</thead>
<tbody>
<tr><td>body</td></tr>
</tbody>
<tfoot>
<tr><td>footers</td></tr>
</tfoot>
</table>