|
Non-scrolling table header.
Introduction
Have you ever had a very long data table but also wanted the
header of the table to be visible at all times? This guide shows
one simple (but limited) way of doing this.
Tested in 
Code below needs tweaking in 
Creating the non-scrolling header
The basic idea is to create the table header as a separate
header from the data table and then place the data table in a
scrolling div. To bind all together I place everything in an
outer table.
The outer table is simply a two cell table:
<table summary="" cellpadding="0"
cellspacing="0" align="center" title="" width="400">
<tr>
<td>R1 C1</td>
</tr>
<tr>
<td>R2 C2</td>
</tr>
</table>
RESULT:
The HEADER table contains whatever information you require,
for example:
<table summary="" cellpadding="0"
cellspacing="0" width="100%">
<tr>
<td colspan="5" align="center">Scrolling Table
Example</td>
</tr>
<tr>
<td width="24%">R1 C1</td>
<td width="24%">R1 C2</td>
<td width="24%">R1 C3</td>
<td width="24%">R1 C4</td>
<td width="4%"> </td>
</tr>
</table>
Combining these the RESULT is:
| Scrolling Table Example |
| R1 C1 |
R1 C2 |
R1 C3 |
R1 C4 |
|
|
| R2 C2 |
The last cell on the right of the header table is there to
match the scrollbar which will be below it.
The data table is placed in a div which is allowed to scroll
with the aid of some CSS as shown:
<div style="height:150px; overflow:
auto;">
<table summary="" cellpadding="0" cellspacing="0"
width="96%">
<tr>
<td width="25%">R1 C1</td>
<td width="25%">R1 C2</td>
<td width="25%">R1 C3</td>
<td width="25%">R1 C4</td>
</tr>
<tr>
<td width="25%">R2 C1</td>
<td width="25%">R2 C2</td>
<td width="25%">R2 C3</td>
<td width="25%">R2 C4</td>
</tr>
.
.
.
</table>
<div>
Combining these three we get the following:
| Scrolling Table Example |
| R1 C1 |
R1 C2 |
R1 C3 |
R1 C4 |
|
|
| R1 C1 |
R1 C2 |
R1 C3 |
R1 C4 |
| R2 C1 |
R2 C2 |
R2 C3 |
R2 C4 |
| R3 C1 |
R3 C2 |
R3 C3 |
R3 C4 |
| R4 C1 |
R4 C2 |
R4 C3 |
R4 C4 |
| R5 C1 |
R5 C2 |
R5 C3 |
R5 C4 |
| R6 C1 |
R6 C2 |
R6 C3 |
R6 C4 |
| R7 C1 |
R7 C2 |
R7 C3 |
R7 C4 |
| R8 C1 |
R8 C2 |
R8 C3 |
R8 C4 |
| R9 C1 |
R9 C2 |
R9 C3 |
R9 C4 |
| R10 C1 |
R10 C2 |
R10 C3 |
R10 C4 |
| R11 C1 |
R11 C2 |
R11 C3 |
R11 C4 |
| R12 C1 |
R12 C2 |
R12 C3 |
R12 C4 |
| R13 C1 |
R13 C2 |
R13 C3 |
R13 C4 |
| R14 C1 |
R14 C2 |
R14 C3 |
R14 C4 |
| R15 C1 |
R15 C2 |
R15 C3 |
R15 C4 |
| R16 C1 |
R16 C2 |
R16 C3 |
R16 C4 |
| R17 C1 |
R17 C2 |
R17 C3 |
R17 C4 |
|
All that is left is to add some presentation to the
tables.
| Scrolling Table
Example |
| R1 C1 |
R1 C2 |
R1 C3 |
R1 C4 |
|
|
| R1 C1 |
R1 C2 |
R1 C3 |
R1 C4 |
| R2 C1 |
R2 C2 |
R2 C3 |
R2 C4 |
| R3 C1 |
R3 C2 |
R3 C3 |
R3 C4 |
| R4 C1 |
R4 C2 |
R4 C3 |
R4 C4 |
| R5 C1 |
R5 C2 |
R5 C3 |
R5 C4 |
| R6 C1 |
R6 C2 |
R6 C3 |
R6 C4 |
| R7 C1 |
R7 C2 |
R7 C3 |
R7 C4 |
| R8 C1 |
R8 C2 |
R8 C3 |
R8 C4 |
| R9 C1 |
R9 C2 |
R9 C3 |
R9 C4 |
| R10 C1 |
R10 C2 |
R10 C3 |
R10 C4 |
| R11 C1 |
R11 C2 |
R11 C3 |
R11 C4 |
| R12 C1 |
R12 C2 |
R12 C3 |
R12 C4 |
| R13 C1 |
R13 C2 |
R13 C3 |
R13 C4 |
| R14 C1 |
R14 C2 |
R14 C3 |
R14 C4 |
| R15 C1 |
R15 C2 |
R15 C3 |
R15 C4 |
| R16 C1 |
R16 C2 |
R16 C3 |
R16 C4 |
| R17 C1 |
R17 C2 |
R17 C3 |
R17 C4 |
|
One serious limitation is obviously that any long content in any of the cells could totally break the alignment
with the header cells.
Note: To scroll the table overflow:auto; is the standards compliant way to specify it.
Using overflow: scroll; will produce both vertical and horizontal scrollbars even when not needed.
overflow-y and overflow-x are MSIE specific and shouldn't be used, although in my opinion
you could a browser sniffer to display a browser specific stylesheet and use these in the MSIE specific
stylesheet. Unfortunately the W3C and other browsers have not yet implemented overflow-x or -y, they should!
This Example source code
<table summary="" cellpadding="0" cellspacing="1" align="center"
title="" width="400" border="0" bgcolor="black">
<tr>
<td>
<table summary="" cellpadding="0" cellspacing="0" width="100%"
align="center" border="0">
<tr bgcolor="gray">
<td colspan="5" align="center"><b>Scrolling Table
Example</b></td>
</tr>
<tr bgcolor="silver">
<td width="24%">R1 C1</td>
<td width="24%">R1 C2</td>
<td width="24%">R1 C3</td>
<td width="24%">R1 C4</td>
<td width="4%"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div style="width:100%; overflow:auto;height:150px;">
<table summary="" cellpadding="0" cellspacing="0" width="96%"
bgcolor="#CCCC99">
<tr>
<td width="25%">R1 C1</td>
<td width="25%">R1 C2</td>
<td width="25%">R1 C3</td>
<td width="25%">R1 C4</td>
</tr>
<tr>
<td width="25%">R2 C1</td>
<td width="25%">R2 C2</td>
<td width="25%">R2 C3</td>
<td width="25%">R2 C4</td>
</tr>
<tr>
<td width="25%">R3 C1</td>
<td width="25%">R3 C2</td>
<td width="25%">R3 C3</td>
<td width="25%">R3 C4</td>
</tr>
<tr>
<td width="25%">R4 C1</td>
<td width="25%">R4 C2</td>
<td width="25%">R4 C3</td>
<td width="25%">R4 C4</td>
</tr>
<tr>
<td width="25%">R5 C1</td>
<td width="25%">R5 C2</td>
<td width="25%">R5 C3</td>
<td width="25%">R5 C4</td>
</tr>
<tr>
<td width="25%">R6 C1</td>
<td width="25%">R6 C2</td>
<td width="25%">R6 C3</td>
<td width="25%">R6 C4</td>
</tr>
<tr>
<td width="25%">R7 C1</td>
<td width="25%">R7 C2</td>
<td width="25%">R7 C3</td>
<td width="25%">R7 C4</td>
</tr>
<tr>
<td width="25%">R8 C1</td>
<td width="25%">R8 C2</td>
<td width="25%">R8 C3</td>
<td width="25%">R8 C4</td>
</tr>
<tr>
<td width="25%">R9 C1</td>
<td width="25%">R9 C2</td>
<td width="25%">R9 C3</td>
<td width="25%">R9 C4</td>
</tr>
<tr>
<td width="25%">R10 C1</td>
<td width="25%">R10 C2</td>
<td width="25%">R10 C3</td>
<td width="25%">R10 C4</td>
</tr>
<tr>
<td width="25%">R11 C1</td>
<td width="25%">R11 C2</td>
<td width="25%">R11 C3</td>
<td width="25%">R11 C4</td>
</tr>
<tr>
<td width="25%">R12 C1</td>
<td width="25%">R12 C2</td>
<td width="25%">R12 C3</td>
<td width="25%">R12 C4</td>
</tr>
<tr>
<td width="25%">R13 C1</td>
<td width="25%">R13 C2</td>
<td width="25%">R13 C3</td>
<td width="25%">R13 C4</td>
</tr>
<tr>
<td width="25%">R14 C1</td>
<td width="25%">R14 C2</td>
<td width="25%">R14 C3</td>
<td width="25%">R14 C4</td>
</tr>
<tr>
<td width="25%">R15 C1</td>
<td width="25%">R15 C2</td>
<td width="25%">R15 C3</td>
<td width="25%">R15 C4</td>
</tr>
<tr>
<td width="25%">R16 C1</td>
<td width="25%">R16 C2</td>
<td width="25%">R16 C3</td>
<td width="25%">R16 C4</td>
</tr>
<tr>
<td width="25%">R17 C1</td>
<td width="25%">R17 C2</td>
<td width="25%">R17 C3</td>
<td width="25%">R17 C4</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
|
