Sunday, September 11, 2005

Scrolling HTML tables

It's very nice to have table headers stay put whilst you scroll the data but it's been hard to separate the wood from the trees in reading about this on the web. So this is an attempt to be really basic about this topic.

As with any HTML question many of the complexities arise when the question of support in all the different browsers is raised so the solution here is very simple in the hope (!) that many browsers can use it.

The key to it all is the HTML div tag - meaning "division" - through which a style can be defined for a region of a document:

<div style="width:10%">
<table>
<tr><td....
</table>
</div>


This will squeeze the table, whatever it is, into 10% of the width of the screen.

There are many possible style settings but the one that matters for scrolling tables is overflow:auto. This will make a table that scrolls:


<div style="overflow:auto">
<table>
<tr><td....
</table>
</div>

This will make the header scroll too - which is not what we want - but if the headers are in a separate table (with the same column widths) and before the div, things begin to look promising:


<table>
<tr><th....
</table>
<div style="overflow:auto">
<table>
<tr><td....
</table>
</div>

Really the only thing left to do is to allow for the width of the scrollbar by making the header table slightly narrower:

<table width="98%">
<tr><th....
</table>
<div style="overflow:auto">
<table>
<tr><td....
</table>
</div>

3 Comments:

Anonymous Alison Supple said...

To the dear Doctor. One for us wot knows not wot you talk of.

12:46 AM  
Anonymous sharlin kaur said...

Thank you for sharing :) really nice information

3:06 AM  
Anonymous Anonymous said...

what about the length ? if you don't fix the length of each th AND each td, you won't have a correct alignment, no ?

4:10 PM  

Post a Comment

<< Home