On tables with a large number of rows, scrolling down forces the column headers off of the screen, and you can lose track of what you're seeing. This bit of CSS will allow you to scroll just the body of the table and leave the headers in place. It works quite well in Firefox, looks good in Internet Explorer if your table doesn't have a "caption" tag, and degrades to standard table display in other browsers.
| People in My Group | |
|---|---|
| Name | Relationship |
| me | of course! |
| George | imaginary friend |
| Daryl | my brother |
| Daryl | my other brother |
| Co 1 | a co-worker |
| Co 2 | a co-worker |
| Co 3 | a co-worker |
| Co 4 | a co-worker |
| Co 5 | a co-worker |
| Co 6 | a co-worker |
| Co 7 | a co-worker |
| Co 8 | a co-worker |
| Co 9 | a co-worker |
The table above was produced like this:
<style type="text/css">
.ScrollTable-container {
display:table-cell;
}
.ScrollTable thead tr {
position: relative;
}
.ScrollTable tbody {
overflow: auto;
}
.ScrollTable tbody tr {
height: auto;
}
.ScrollTable tbody tr td:last-child {
padding-right: 20px;
}</style>
-------------------------------------------------------
<div class="ScrollTable-container">
<div class="ScrollTable" style="height: 200px;">
<table>
<thead>
<tr><th colspan="2">Heading</th></tr>
<tr><th>Column 1</th><th>Column 2</th></tr>
</thead>
<tbody style="height: 135px;">
<tr>
<td align="left">Label1</td>
<td align="left">Data1</td>
</tr>
<tr>
<td align="left">Label2</td>
<td align="left">Data2</td>
</tr>
</tbody>
</table>
</div>
</div>
.
