Scrolling in Tables

<table border="1" cellpadding="1" cellspacing="0" >
<tr><td height="30" align="center">Header</td></tr>
<tr>
<td valign="top">
<div style="width:400px;height:200px;overflow:auto">
<P>This first example shows how you can scroll the contents of a table with a single cell.
<P>Dummy Text.
<P>Dummy Text.
<P>Dummy Text.
<P>Dummy Text.
<P>Dummy Text.
<P>The End
</div></td>
</tr>
<tr><td height="30" align="center">Footer</td></tr>
</table>

<table border="0px" cellpadding="0px" cellspacing="0px">
<tr align="center" valign="top" height="30">
<td>Header 1</td><td>Header 2</td><td>Header 3</td><td>Header 4</td>
</tr>
<tr>
<td>
<div style="width:150px;height:150px;overflow:auto">
This second example is a single table with 3 rows.
<P>The End
<P>The top and middle row have 4 cells while the bottom row has a single cell.
</div>
</td>
<td>
<divdiv style="width:150px;height:150px;overflow:auto">
<P>Each cell has the ability to scroll if and when required.
<P>Dummy Text 1<P>Dummy Text 2<P>Dummy Text 3<P>Dummy Text 4<P>The End
</div>
</td>
<td>
<divdiv style="width:150px;height:150px;overflow:auto">
Only when the cell contents exceed the cell height are the scrollbars shown.
</div>
</td>
<td>
<div style="width:150px;height:150px;overflow:auto">
The scrollbar will take up some of the cell width
<P>Contents<P>Contents<P>Contents<P>Contents<P>The End
</div>
</td>
</tr>
<tr><td height="30" colspan="4" align="center">Footer</td></tr>
</table>

<script type="text/javascript">
<!--
// Realised by Apachejeff
// www.huntingground.freeserve.co.uk

cell_count=4
div_height=new Array()
list=new Array

function chk_height(){
for(i=0;i<cell_count;i++){
div_height[i]=document.getElementById("div"+[i]).scrollHeight // get divs height
}

div_height=div_height.sort(compareNumbers) // sort list

max_div=div_height[div_height.length-1] // get highest number
document.getElementById("div33").style.height=max_div

for(i=0;i<div_height.length-1;i++){
diff=max_div-div_height[i] // get difference between highest div and current
new_h=diff+div_height[i] // add difference to current div to make same as highest div
document.getElementById("div"+[i]+[i]).style.height=new_h // new current div height
}
}

function scroll_cells(){
for(i=0;i<cell_count;i++){
document.getElementById("div"+[i]).scrollTop = document.getElementById("div3").scrollTop
}

}

function compareNumbers(a, b) {
return a - b}

// add onload="chk_height()" to the opening BODY tag

// -->
</script>

<P><table border="1" width="100%" height="200" cellpadding="0" cellspacing="0" >
<tr align="center">
<td height="30" width="25%">Header 1</td>
<td width="25%">Header 2</td>
<td width="25%">Header 3</td>
<td>Header 4</td>
</tr>
<tr>
<td>
<div id="div0" style="width:100%;height:100%;overflow:hidden">
<div id="div00">
This third example has all four cells scrolling in unison with the scrollbar situated in the last cell.
</div>
</div>
</td>
<td>
<div id="div1" style="width:100%;height:100%;overflow:hidden">
<div id="div11">
Irrespective of how much text is in the cells a script calulates the scrolling distance on the cell with the most contents.
<P>Dummy Text<P>Dummy Text<P>Dummy Text<P>Dummy Text<P>Dummy Text
<P>Dummy Text<P>Dummy Text<P>Dummy Text<P>Dummy Text<P>The End
</div>
</div>
</td>
<td>
<div id="div2" style="width:100%;height:100%;overflow:hidden">
<div id="div22">
<P>Dummy Text<P>Dummy Text<P>Dummy Text<P>Dummy Text<P>Dummy Text
<P>Dummy Text<P>Dummy Text<P>Dummy Text<P>Dummy Text<P>Dummy Text
<P>Dummy Text<P>Dummy Text<P>Dummy Text<P>Dummy Text<P>The End
</div>
</div>
</td>
<td>
<div id="div3" style="width:100%;height:100%;overflow:auto" onscroll="scroll_cells()">
<div id="div33">
<P>Dummy Text<P>Dummy Text<P>Dummy Text<P>Dummy Text<P>Dummy Text
<P>Dummy Text<P>Dummy Text<P>Dummy Text<P>Dummy Text<P>Dummy Text
<P>Dummy Text<P>Dummy Text<P>Dummy Text<P>Dummy Text<P>Dummy Text
<P>Dummy Text<P>Dummy Text<P>Dummy Text<P>Dummy Text<P>The End
</div></div>
</td>
</tr>
<tr><td height="30" colspan="4" align="center">Footer</td></tr>
</table>