Fixing topmost and leftmost rows on scrollable table...

  • Thread starter Thread starter Leo J. Hart IV
  • Start date Start date
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
 
Is this even possible?
Click to expand...

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.


--
 
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?
Click to expand...


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

http://web.tampabay.rr.com/bmerkey/examples/locked-column-csv.html
 
Back
Top