Fixing topmost and leftmost rows on scrollable table...

[Leo J. Hart IV]

Hello,

I have a table:

<table border="1" cellpadding="0" cellspacing="0"
style="border-collapse: collapse" bordercolor="#111111" width="100%"
id="AutoNumber1">
<tr>
<td width="10%">&nbsp;</td>
<td width="10%" bgcolor="#C0C0C0">xa</td>
<td width="10%" bgcolor="#C0C0C0">xb</td>
<td width="10%" bgcolor="#C0C0C0">xc</td>
<td width="10%" bgcolor="#C0C0C0">xd</td>
<td width="10%" bgcolor="#C0C0C0">xe</td>
</tr>
<tr>
<td width="10%" bgcolor="#C0C0C0">ya</td>
<td width="10%">1</td>
<td width="10%">2</td>
<td width="10%">3</td>
<td width="10%">4</td>
<td width="10%">5</td>
</tr>
<tr>
<td width="10%" bgcolor="#C0C0C0">yb</td>
<td width="10%">1</td>
<td width="10%">2</td>
<td width="10%">3</td>
<td width="10%">4</td>
<td width="10%">5</td>
</tr>
<tr>
<td width="10%" bgcolor="#C0C0C0">yc</td>
<td width="10%">1</td>
<td width="10%">2</td>
<td width="10%">3</td>
<td width="10%">4</td>
<td width="10%">5</td>
</tr>
<tr>
<td width="10%" bgcolor="#C0C0C0">yd</td>
<td width="10%">1</td>
<td width="10%">2</td>
<td width="10%">3</td>
<td width="10%">4</td>
<td width="10%">5</td>
</tr>
<tr>
<td width="10%" bgcolor="#C0C0C0">ye</td>
<td width="10%">1</td>
<td width="10%">2</td>
<td width="10%">3</td>
<td width="10%">4</td>
<td width="10%">5</td>
</tr>
</table>

I would like to somehow make it so that I can scroll
up/down/left/right on this table (if it is too big for the
encapsulating space), while keeping the top-most and left-most columns
fixed. The behaviour would be similar to when you pin rows and
columns in Microsoft Excel. The data to be displayed in this table
will be coming from an OLAP cube, so it is possible (likely) that
there will be headers on the top AND the left of the grid.

I've tried various HTML, JavaScript and DHTML approaches and none seem
to work. My target browser is IE 6.0 SP1.

Is this even possible?

Thanks,
Leo Hart

[kaeli]

In article <b6*************************@posting.google.com> ,
le******@fmr.com enlightened us with...

Is this even possible?

That depends on how much control you have over what generates the html.

I myself would have a table encompassing three tables - one table for
the header rows, one for the header columns, and a scrollable table as
the body.
But I use JSP and can easily do this.
--
--
~kaeli~
Does the name Pavlov ring a bell?
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

[Brett Merkey]

> I would like to somehow make it so that I can scroll

up/down/left/right on this table (if it is too big for the
encapsulating space), while keeping the top-most and left-most columns
fixed. The behaviour would be similar to when you pin rows and
columns in Microsoft Excel.
I've tried various HTML, JavaScript and DHTML approaches and none seem
to work. My target browser is IE 6.0 SP1.
Is this even possible?

Yes, with the help of CSS you do just about anything.

http://web.tampabay.rr.com/bmerkey/e...olumn-csv.html

[johkar]

Brett, this is THE best IE excel scrolling I have seen. I have been able to
achieve this to where the results looks almost the same, but the amount of
code and CSS in your example is relatively simple comparatively. While I
took a similar approach for the vertical scrolling, your fixed first column
for horizontal scrolling is much easier. Thanks for sharing. On I side
note, I hope that one day all the major, modern browsers will support
scrollable table body tags...much easier.

John

"Brett Merkey" <bm*****@tampabay.rr.com> wrote in message
news:aF*******************@twister.tampabay.rr.com ...

I would like to somehow make it so that I can scroll
up/down/left/right on this table (if it is too big for the
encapsulating space), while keeping the top-most and left-most columns
fixed. The behaviour would be similar to when you pin rows and
columns in Microsoft Excel.
I've tried various HTML, JavaScript and DHTML approaches and none seem
to work. My target browser is IE 6.0 SP1.
Is this even possible?

Yes, with the help of CSS you do just about anything.

http://web.tampabay.rr.com/bmerkey/e...olumn-csv.html

[Brett Merkey]

> http://web.tampabay.rr.com/bmerkey/e...olumn-csv.html

Brett, this is THE best IE excel scrolling I have seen. I have been able to achieve this to where the results looks almost the same, but the amount of
code and CSS in your example is relatively simple comparatively. While I
took a similar approach for the vertical scrolling, your fixed first column for horizontal scrolling is much easier. Thanks for sharing. On I side
note, I hope that one day all the major, modern browsers will support
scrollable table body tags...much easier.

John

Thanks. Simplicity is my specialty. :-D
Yes, it's too bad that browsers (esp. IE) don't make it easier to code
table usability conveniences for screen display and print. Getting
repeating table headers and footers requires a bit of CSS and HTML
choreography as well.

Brett

[Leo J. Hart IV]

Hi Guys,
Thanks to you all for your input. Brett, your example is exactly what I'm
looking for. However, I'm a little confused by how you populate the table
data. It looks like you're using this object:

<object ID=tdcData CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<PARAM NAME="DataURL" VALUE="grades2.csv">
<PARAM NAME="UseHeader" VALUE="true">
</object>

Unfortunately, I'll be using J2EE JSP pages to create this page (I haven't
been able to convince these guys to us .NET yet). How would I populate this
table using traditional methods (ie: using a for-loop to build out the
rows)? Is it as easy as just writing out the repeating rows like:

<tr>
<td><span datafld="name">Joe Schmo</span></td>
<td><span datafld="major">Underwater Basket-Weaving</span></td>
<td><span datafld="sex">Not lately</span></td>
<td><span datafld="english">Yes. Cheerio</span></td>
<td><span datafld="japanese">Domo Arigato Mr. Roboto</span></td>
<td><span datafld="calc"></span>Y</td>
<td><span datafld="geometry">Y</span></td>
</tr>
Thanks,
Leo

"Brett Merkey" <bm*****@tampabay.rr.com> wrote in message
news:tK********************@twister.tampabay.rr.co m...

http://web.tampabay.rr.com/bmerkey/e...olumn-csv.html

Brett, this is THE best IE excel scrolling I have seen. I have been able to

achieve this to where the results looks almost the same, but the amount

of code and CSS in your example is relatively simple comparatively. While I took a similar approach for the vertical scrolling, your fixed first

column

for horizontal scrolling is much easier. Thanks for sharing. On I side note, I hope that one day all the major, modern browsers will support
scrollable table body tags...much easier.

John

Thanks. Simplicity is my specialty. :-D
Yes, it's too bad that browsers (esp. IE) don't make it easier to code
table usability conveniences for screen display and print. Getting
repeating table headers and footers requires a bit of CSS and HTML
choreography as well.

Brett

[Brett Merkey]

> Thanks to you all for your input. Brett, your example is exactly what I'm

looking for. However, I'm a little confused by how you populate the table
data. It looks like you're using this object:

<object ID=tdcData CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"> <PARAM NAME="DataURL" VALUE="grades2.csv">
<PARAM NAME="UseHeader" VALUE="true">
</object>

Unfortunately, I'll be using J2EE JSP pages to create this page (I haven't
been able to convince these guys to us .NET yet). How would I populate this table using traditional methods (ie: using a for-loop to build out the
rows)?

In the example, I populated the table using IE's client-side ability to read
data from a delimited text file and automatically populate a table based
on the one row "template."

If you are using server-side technology to populate the table, yes, in this
case
you would use a JSP tag to iterate writing rows of HTML. You would not
use the "datafld" lingo I used. Hope this helps. I leave the JSP to the Java
guys.

Brett