0
Posted November 22, 2012 by Bandish Patel in Tips
 
 

Non-scrolling table header.


Non-scrolling table header.

Non-scrolling table header.

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 IE6 Icon

Code below needs tweaking in Mozilla Icon
Opera Icon

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:

R1 C1
R2 C2

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%”>&nbsp;</td>

</tr>

</table>

Combining these the RESULT is:

Scrolling Table Example
R1 C1 R1 C2 R1 C3 R1 C4 &nbsp;
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>

 


Bandish Patel