Fixing topmost and leftmost rows on scrollable table...

L

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
 
K

kaeli

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.


--
 
B

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/examples/locked-column-csv.html
 
B

Brett Merkey

http://web.tampabay.rr.com/bmerkey/examples/locked-column-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
 
L

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
 
B

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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top