Emulating Excel freeze titles while scrolling horz and vert

Programmer says this can not be done for less than $$$$$

[Shane]

Help please. My programmer says that our web reporting system can not have scrolling horizontally and vertically in the tables with the titles frozen in place but aligned to the data. What I would like is similar to Excell where you freeze the titles and the data in the table scrolls left and right and up and down. The correct titles will scroll with the data so the titles always align with the data.

With me? Well, the programmer says this is maybe doable but at great expense and probably horrible design. He says one dimension is much easier and much cheaper (Grrrrr!).

Has anyone seen this done? If so, where please. Has anyone done this? If so, how?

Thanks,
Shane

[Sinner_G]

The easiest way would be to use frames, but I'm certain the gurus in here will tell you how to do it with CSS.

[Hester]

Haha, just use position:fixed. Doesn't work in IE though!

I did this for my page CSS Test Suite Failures (Results) on my website. You can scroll up and down while the top remains in place, just like Excel.

[Iguana]

I've done this a few times but it's not easy. The problem is table elements expand depending on the data in them - even if a cell has an assigned width of 100 it will expand when it finds a long word. You end up with 2 tables: a titles column and the data in a scrollable div. When you load the data you have to synchronise the cell widths of the titles table - which doesn't always work exactly so you change the tables widths - then titles widths again - and with large amounts of data this can lock the browser for ages.

Now, you can load the data in a table - the columns expand to whatever width they want to. If you have the titles in a series of DIVs you can set the width of the DIV absolutely (from reading the widths of the data table cells) and unlike a table cell it will not exceed that width.

So, suggest the titles in a DIV surrounding each column heading in it's own DIV. There's work to be done in the synchronisation of the scrollabe data section with the titles but this is fairly simple.

[Hester]

I just added a fixed width to the table cells in my CSS. Any sentences spill down onto a new line. But then I don't have any words long enough to make the cells too wide. Could max-width be used?

[Shane]

The width of the columns shouldn't be a problem as it is numerical data, integers between 0 and at most 1000. The column and row headings are known lengths as they are from a code table. Their lengths do vary but we could pad with blanks to force a uniform length.

Thanks for the feedback so far. You peoples are great! (Any more thoughts appreciated:))

..... Shane

[AWildman]

Why not put the titles right above a scrollable iframe?
I know its not exactly what you want to do, but I have a site in which I have the following setup:

nav iga tion bar________________________
scrollable main container div ¦
scrollable main container div ¦
scrollable main container div ¦
scrollable main container div ¦
scrollable main container div ¦
__________________________________________

After seeing this post, I realize that the top and bottom solid lines don't match up and neither do the pipes at the end of the div, but they do when in the iframe, trust me! :)

The iframe has a set width in its container page and is set not to scroll. The scrollable main container div has no width restrictions...until it appears in the iframe, at which time, the div is restricted by the size of the iframe. Put your table in the scrollable div and you should have no problems.

Of course, this alone only solves your vertical movement. You could use some javascript to "move" the column headings along with your table data. In that case I'd put the column headings in another iframe and synchronize its movement to the movement of the data iframe.

If you want to see it in action, and how it applies to your problem, gimme a sticky.
Okay, that doesn't sound good, but you know what I mean.

[Iguana]

It was easier to do an example rather than explain in English - this syncs a title table (no scrollbar) with a data table (scrolling). Copy and paste this into an HTML page

<HTML>
<HEAD>
<style>
TD {width:100}
</style>
<script>
function sync()
{
var lft = document.all("dvData").scrollLeft
document.all("dvHeader").style.width=200+lft
document.all("dvHeader").style.left= -lft
}
</script>
</HEAD>
<BODY>
<div id="dvHeader" style="position:absolute; left:0; top:0; height:50; width:200; overflow:hidden">
<table border=1 bgcolor=cyan width=1000 id="tblHeader">
<tr><td>title 1</td><td>title 2</td><td>title 3</td><td>title 4</td><td>title 5</td><td>title 6</td><td>title 7</td></tr>
</table></div>
<div id="dvData" style="position:absolute; left:0; top:30;height:80; width:200;overflow:auto" onscroll="sync()">
<table border=1 width=1000 name="tblData" id="tblData">
<tr><td>1000</td><td>1000</td><td>1000</td><td>1000</td><td>1000</td><td>1000</td><td>1000</td></tr>
<tr><td>1000</td><td>1000</td><td>1000</td><td>1000</td><td>1000</td><td>1000</td><td>1000</td></tr></table>
</div>
</BODY>
</HTML>

[Shane]

Iguana,

That works great for the one dimension. Not wanting to sound unappreciative, how does one do the other dimension as well?

(Can I have cold beer shipped to a PubCon for you peoples? I know, you can ship the bar tab to ME!)

Thanks all,
Shane

[killroy]

Hehe that's the crux of the matter, isn't it...

Scrolling parts and havign aligned parts fixed is easy, that's what frames are made for. But waht you want is to have something which is sometiems fixed (for vertical scrolling ) and moves at other times (horizontal scrolling) and vice versa for the vertical column titles.

It's doable in Js and DHTML which is in fact very capable. But your programmer was quite right in saying it may be rather complex to get working reliably and therefore cost $$$.

It really depends on the circumstances. if it'S for an intranet or admin system, it could be designed for just one browser and be much easier to do.

Also, it greatly depends on the experiecne of your programmer. I for example, have a long tiem ago created an extensive object library for movable JS/DHTML stuff, and with a toolset like that it would be much quicker to do.

But it certainly is not a trivial problem.

SN

[Shane]

Hmmmm, thanks for the perspective. So it is tough and a factor is the programmers experience. In this case the programmer is younger.

So, maybe we go woth scrolling in one dimension.

Thanks. This has been valuable for me.

..... Shane

[Iguana]

The two dimesional scrolling can be done just as easily (use scrollTop in addition to the scrollLeft) - I just wanted to demonstrate the principle.

If you want me to actually write all the code then I start charging!

[Shane]

Iguana,

As you should Iguana, as you should. And I thank-you for the free education.

..... Shane

[txbakers]

very cool. That solves a bunch of questions for me.

Thanks.