Table - fixed header, scrollable body, most robust/simple solution?
css, html, html-table, javascript
Solution
<table style="width: 300px" cellpadding="0" cellspacing="0">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
<div style="overflow: auto;height: 100px; width: 320px;">
<table style="width: 300px;" cellpadding="0" cellspacing="0">
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
</table>
</div>
This creates a fixed column header with the scrollable table below it. The trick is to embed the table you want to scroll in a tag with the overflow attribute set to auto. This will force the browser to display a scrollbar when the contents of the inner table are larger than the height of the surrounding .
The width of the outer must be larger than the width if the inner table to accommodate for the scrollbar. This may be difficult to get exactly right, because some users may have set their scrollbars to be wider or smaller than the default. However, with a difference of around 20 to 30 pixels you'll usually be able to display the scrollbar just fine.
CSS-Tricks also talks about using JavaScript and CSS to help with this as well so you can use highlighting. Here is the link to that article.
Problem
Possible Duplicate: HTML table with fixed headers? Looking for a solution to create a table with a scrollable body, and a static/fixed header. Searching around seems to produce MANY flaky pieces of code, either not working in IE, requiring a huge amount of Javascript and tweaking, or a silly amount of CSS hacks etc. To be honest, if it's a case of CSS hacks or Javascript, I think I'd prefer to go the Javascript option. The alternative I guess is to place it all in a div, and just scroll the entire table - but that's a bit naff :D