Introduction

This JavaScript code can be used to convert tables in ordinary HTML into scrollable ones. No additional coding is necessary. All you need to do is put header rows in TBODY and give your table an ID field, include the ScrollableTable.js file and call makeScrollableTable in your document's onLoad method.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

I'm trying to use this code on a table that is being created dynamically in JavaScript and have run into a couple of problems. First, if I rebuild the table in code the scroll bars go away and I get a long, multi-page table. I traced this to the fact that the second time through the ScrollableTable code the container array has 2 occurrences (even though it's for the same table), causing the else condition of this code to be executed (where c is the array occurrence count):
if (c == 0 && height == 'auto'){
onResizeAdjustTable();
onResizeHandler = window.onresize;
window.onresize = onResizeAdjustTable;
}else{
container[c].style.height = height;
}

I modified the function to allow me to pass in the value for c and this works as far as making the table scrollable (the if condition is executed), but after only a few iterations through this code an "out of stack space" error results because the following line of code is executed over & over again:
if (onResizeHandler) onResizeHandler();

How can I get around this? FYI, I'm not a JavaScript expert. .Net & SQL are my areas of expertise and I'm learning JavaScript as I go along for this project.

One small change I made was to adjust widths in all lines of the table body, not just the first. Otherwise the first line was aligned correctly, the following lines were shifted to the right when no scrollbar was present and to the left with a scrollbar present.

Since the width for the table and the rows are calculated in the Javascript, I am facing issues . I need to open the same table HTML in a window for print. Since the width for the table is in pixels, the print page is showing a horizontal scrollbar.

Hi
Great job with this script.
But have a bug with input in footer.
We try to change an input dynamically with document.forms[0].elements['XX'].value='3' . When then we do alert(document.forms[0].elements['XX'].value) the value is correct, but on the screen there is the initial value.
Did someone resolved this ?
thanks

I am building a table that loads data form DOM. I have a dropdownlist to populate the table. It works fine without the scrollbar.

The first time that i load the table it also works fine, but when i load in new data to the table the scrollbar do not disapear and the header stays. Is there anyway to remove the scrollbar and load it again? I have tried to make a new function in scrollableTable to delete it but I haven`t manage to get i to work.

I am having so much trouble with implementing a scrollbar using this code. My program won't run and stops at the line:
function fixTableWidth(tbl){
for (var i=0; i < tbl.tHead.rows.length; i++) findRowWidth --> It stops here at tbl.tHead.rows.length it says there is no object required.

I know it says the table header has to be defined in TBODY , im not sure what this means or if it has anything to do with the reason the code isn't working. I did try putting in but that didn't work.