scrolling table

within a <div>

[joshie76]

OK, this is difficult to explain but bear with me... Here's a simplified example [hrmsoftware.com]

We have a spreadsheet (table in green) inside another table (red) at width 100%. Because the sheet can get quite big we want to have the inner table scrolling (using a DIV; shown in blue) whilst the outer table at 100% stays at 100% screen width.

I just can't get it to work though... What I'm trying to achieve might be clearer if you look at the full prototype [hrmsoftware.com]*. Only need it work in IE5+

Cheers in advance.

(PS - hope it's ok for me to post example URLs)

*(PPS - Very early prototype!!)

[tedster]

It works when I eliminate the outside "container" table (the one that generates the red line). So something about the nesting (a table, inside a div, inside a table) is confusing the browser.

[netcommr]

have you thought about an <iframe>spreadsheet</iframe>

[joshie76]

Taking on board tedsters comments I've managed to get it to
[url=www.hrmsoftware.com/test/k011-scroll.htm]this...[/url] (click show market data to see more stuff for testing) nearly there except when your window is pretty small, the two tables size differently.

I imagine there probably isn't a way around this...

Iframes were considered but all the calculations are run and refreshed live on the client and doing this over two pages will make the javascript even nastier!

Thanks guys