...

View Full Version : Fully scrollable table. - How?



Col
07-08-2005, 12:37 AM
Hi,

I need to display a table with maybe 15,000 cells; yep, not a typo, fifteen thousand. I also need to have a fixed header and left column. More, I need the header to scroll across with the table, and the left column vertically, just like an excel table.

There is code available if I just want a static header, but I need it to be far more dynamic than that.

I was hoping there would be a way to do this with DHTML, but my early optimism was misplaced I fear. I really do need this pretty urgently.

Any ideas?

Thanks.

mrruben5
07-08-2005, 12:11 PM
Use thead and tbody, and set overflow:auto with css on tbody :P

Col
07-08-2005, 06:57 PM
Use thead and tbody, and set overflow:auto with css on tbody :P

I need a fixed left reference column that will scroll vertically and a fixed reference header that will scroll horizontally with the body of the table.

I've found something elsewhere, but it only works in IE for the moment.

http://forums.devshed.com/showthread.php?s=&threadid=88604&highlight=static+column+table

It's the code posted by slydero. It only works in IE though. I've posted at that site, but I've not had a reply that helps yet.

I've also come across this code, seems to be along the right tracks, works in IE, NS, FF, but not Opera. I could live with that, as I can always put a link up for those who use Opera (or anything else that falls over), and they can view the whole table without any fancy scrolling.

The code that would need addapting:


<html>
<head>
<title>Scroll</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#FFFFFF" text="#000000">
<div style="top:0px; left:20px;width:300px;
height:100px;position:absolute; clip:rect( 0px 300px auto 0px);
overflow:hidden;">
<div id="HTab" style="top:0px; left:0px; position:absolute ">
<table bgcolor=gray width=500 border="1" >
<tr>
<td style="width:100" nowrap>eins</td>
<td style="width:100" nowrap>zwei</td>
<td style="width:100" nowrap>drei</td>
<td style="width:100" nowrap>vier</td>
<td style="width:100" nowrap>fuenf</td>
</tr>
</table>
</div>
</div>
<div id="DataTab" style="position:absolute; top:30px;
left:20px;height:300px; width:300px; overflow:scroll"
onScroll="scrollit()">

<table width=500 border="1" >
<tr>
<td style="width:100" nowrap>eins</td>
<td style="width:100" nowrap>zwei</td>
<td style="width:100" nowrap>drei</td>
<td style="width:100" nowrap>vier</td>
<td style="width:100" nowrap>fuenf</td>
</tr>

<tr>
<td></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td nowrap></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</div>
<div id="ausgabe" style="position:absolute;top:500px">
</div>
<script language="JavaScript">
function scrollit() {
eldata=document.getElementById("DataTab");
elheader=document.getElementById("HTab");
x=eldata.scrollLeft;
elheader.style.left=-eldata.scrollLeft;
}

</script>
</body>
</html>

This is an improvement over some other code I've seen that does not allow for horizontal scrolling, but I still need the left column to remain visable, much as the top top row (header). This left column will, of course, scroll vertically to match the main body of the table.

Anyone?

Thanks.

FlaG8r
07-09-2005, 02:25 AM
The way I handled this problem was to make a static table that fit the page without producing scrollbars and then change the values in the cells based on users pressing buttons on the bottom and sides. Virtual scrolling I guess.

I don't actually store my whole tables in the browser at one time, as some of them are hundreds of thousands of rows long. I just keep the header and footer (with the sums) visible at all times and maintain a buffer of rows around the visible rows in javascript arrays using AJAX to update as the user moves around the table.

It might seem resource intensive to keep updating like that, but the reality is that 98% of the time the business school types that have to have these giant reports just look at the bottom line and maybe one other set of rows so I actually save resources by just loading a small portion at the start rather than the whole table.

It is a very javascript-heavy and inelegant solution though and there really should be a standard, simple cross-browser way to lock rows and columns

Col
07-09-2005, 01:54 PM
Hi Flag8r,

Thanks for the reply. Your solution may be of interest for me for another table under construction. The way I was intending to display that table was to use two iframes side-by-side, and switch between the different columns with a series of buttons at the top. This will meen, like you, I will only have to load part of the table. However, this is not the best solution for the table in hand.

I will be displaying a series of values that will slide up and down in a smooth manner. The viewer is more likely to select a value from the table, and then reference the values in the header, so i need the whole table displyed. Yes, the table will be large, larger than I'd like on a page, but should not take an excessive amount of time to load, and since it will be in a div, other material will have loaded anyway.

At this rate, I think I'll end up using the IE friendly solution, as I've not been able to make the more cross-browser friendly version work with a side column as yet. I'll just place a link to the full table with no fancy scrolling for those with incompatible browsers. I am not really happy with this solution, as it's not really a soultion at all for those not using IE. Here's the solution I will probably use, for now, but if anyone can see a way to make it cross-browser friendly, I'd really, really appreciate it.

Thanks.


<head>
<title>Scroll test</title>
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
<style>

#div1 {
margin:2px 0 0 0;
overflow: hidden;
height: 248;
}

#div2 {
overflow: hidden;
width: 328;
}

#div3 {
overflow: auto;
width: 345;
height:265;

}


</style>
<script>
window.onload = function () {
addScrollSynchronization(document.getElementById("div2"), document.getElementById("div3"), "horizontal");
addScrollSynchronization(document.getElementById("div1"), document.getElementById("div3"), "vertical");
//addScrollSynchronization(document.getElementById("div4"), document.getElementById("div1"), "both");
};
// This is a function that returns a function that is used
// in the event listener
function getOnScrollFunction(oElement) {
return function () {
if (oElement._scrollSyncDirection == "horizontal" || oElement._scrollSyncDirection == "both")
oElement.scrollLeft = event.srcElement.scrollLeft;
if (oElement._scrollSyncDirection == "vertical" || oElement._scrollSyncDirection == "both")
oElement.scrollTop = event.srcElement.scrollTop;
};

}
// This function adds scroll syncronization for the fromElement to the toElement
// this means that the fromElement will be updated when the toElement is scrolled
function addScrollSynchronization(fromElement, toElement, direction) {
removeScrollSynchronization(fromElement);

fromElement._syncScroll = getOnScrollFunction(fromElement);
fromElement._scrollSyncDirection = direction;
fromElement._syncTo = toElement;
toElement.attachEvent("onscroll", fromElement._syncScroll);
}

// removes the scroll synchronization for an element
function removeScrollSynchronization(fromElement) {
if (fromElement._syncTo != null)
fromElement._syncTo.detachEvent("onscroll", fromElement._syncScroll);

fromElement._syncTo = null;;
fromElement._syncScroll = null;
fromElement._scrollSyncDirection = null;
}
</script>
</head>

<body leftmargin=15px>
<table border=0 cellpadding=0 cellspacing=0><tr><td valign=top>
<table border=0 cellpadding=8 cellspacing=0 style="border-color:white">
<tr>
<td height=50 bgcolor=#ffffff align=right></td>
</tr>
</table>
<div id=div1>
<table border=1 cellpadding=8 cellspacing=0 bgcolor="ffffff">
<tr>
<td nowrap height=50px bgcolor=#838C93 width=110><font size="2"><b>Row 1</td>
</tr>
<tr>
<td nowrap height=50px bgcolor=#838C93 width=110><font size="2"><b>Row 2</td>
</tr>
<tr>
<td nowrap height=50px bgcolor=#838C93 width=110><font size="2"><b>Row 3</td>
</tr>
<tr>
<td nowrap bgcolor=#838C93 height=50px width=110><font size="2"><b>Row 4</td>
</tr>
<tr>
<td nowrap bgcolor=#838C93 height=50px width=110><font size="2"><b>Row 5</td>
</tr>
<tr>
<td nowrap bgcolor=#838C93 height=50px width=110><font size="2"><b>Row 6</td>
</tr>
<tr>
<td nowrap bgcolor=#838C93 height=50px width=110><font size="2"><b>Row 7</td>
</tr>
<tr>
<td nowrap bgcolor=#838C93 height=50px width=110><font size="2"><b>Row 8</td>
</tr>
<tr>
<td nowrap bgcolor=#838C93 height=50px width=110><font size="2"><b>Row 9</td>
</tr>
<tr>
<td nowrap bgcolor=#838C93 height=50px width=110><font size="2"><b>Row 10</td>
</tr>
</table>
</div>
</td>

<td valign=top>
<DIV id=div2 name=div2>
<table border=1 cellpadding=8 cellspacing=0>
<tr>
<td nowrap height=50 width=110 align=center bgcolor=#838C93><font color=white size="2"><b>Col 1</td>
<td nowrap height=50 width=110 align=center bgcolor=#838C93><font color=white size="2"><b>Col 2</td>
<td nowrap height=50 width=110 align=center bgcolor=#838C93><font color=white size="2"><b>Col 3</td>
<td nowrap height=50 width=110 align=center bgcolor=#838C93><font color=white size="2"><b>Col 4</td>
<td nowrap height=50 width=110 align=center bgcolor=#838C93><font color=white size="2"><b>Col 5</td>
<td nowrap height=50 width=110 align=center bgcolor=#838C93><font color=white size="2"><b>Col 6</td>
<td nowrap height=50 width=110 align=center bgcolor=#838C93><font color=white size="2"><b>Col 7</td>
<td nowrap height=50 width=110 align=center bgcolor=#838C93><font color=white size="2"><b>Col 8</td>
<td nowrap height=50 width=110 align=center bgcolor=#838C93><font color=white size="2"><b>Col 9</td>
<td nowrap height=50 width=110 align=center bgcolor=#838C93><font color=white size="2"><b>Col 10</td>
</tr>
</table>
</div>

<div id=div3 name=div3>
<table border=1 cellpadding=8 cellspacing=0 >
<tr>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 1 Col 1
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 1 Col 2
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 1 Col 3
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 1 Col 4
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 1 Col 5
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 1 Col 6
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 1 Col 7
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 1 Col 8
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 1 Col 9
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 1 Col 10
</td>
</tr>

<tr>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 2 Col 1
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 2 Col 2
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 2 Col 3
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 2 Col 4
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 2 Col 5
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 2 Col 6
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 2 Col 7
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 2 Col 8
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 2 Col 9
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 2 Col 10
</td>
</tr>
<tr>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 3 Col 1
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 3 Col 2
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 3 Col 3
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 3 Col 4
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 3 Col 5
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 3 Col 6
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 3 Col 7
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 3 Col 8
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 3 Col 9
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 3 Col 10
</td>
</tr>
<tr>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 4 Col 1
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 4 Col 2
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 4 Col 3
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 4 Col 4
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 4 Col 5
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 4 Col 6
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 4 Col 7
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 4 Col 8
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 4 Col 9
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 4 Col 10
</td>
</tr>
<tr>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 5 Col 1
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 5 Col 2
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 5 Col 3
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 5 Col 4
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 5 Col 5
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 5 Col 6
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 5 Col 7
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 5 Col 8
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 5 Col 9
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 5 Col 10
</td>
</tr>
<tr>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 6 Col 1
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 6 Col 2
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 6 Col 3
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 6 Col 4
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 6 Col 5
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 6 Col 6
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 6 Col 7
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 6 Col 8
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 6 Col 9
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 6 Col 10
</td>
</tr>
<tr>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 7 Col 1
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 7 Col 2
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 7 Col 3
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 7 Col 4
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 7 Col 5
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 7 Col 6
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 7 Col 7
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 7 Col 8
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 7 Col 9
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 7 Col 10
</td>
</tr>
<tr>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 8 Col 1
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 8 Col 2
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 8 Col 3
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 8 Col 4
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 8 Col 5
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 8 Col 6
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 8 Col 7
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 8 Col 8
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 8 Col 9
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 8 Col 10
</td>
</tr>
<tr>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 9 Col 1
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 9 Col 2
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 9 Col 3
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 9 Col 4
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 9 Col 5
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 9 Col 6
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 9 Col 7
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 9 Col 8
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 9 Col 9
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 9 Col 10
</td>
</tr>
<tr>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 10 Col 1
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 10 Col 2
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 10 Col 3
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 10 Col 4
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 10 Col 5
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 10 Col 6
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 10 Col 7
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 10 Col 8
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 10 Col 9
</td>
<td nowrap bgcolor=#CFD2D5 height=50px width=110><font size="2">
Row 10 Col 10
</td>
</tr>

</table>
</div>
</td>
</tr>
</table>
</body>
</html>

Yakisoba
07-11-2005, 07:30 AM
Not sure if this will help you but...

Last time I needed to load the entire contents of a fairly large (excel) table, I threw the whole thing in an <iframe>.

i.e



<iframe src="bigtable.xl" scrolling="yes"></iframe>





Yak

Yakisoba
07-11-2005, 07:36 AM
Not sure if this will help you but...

Last time I needed to load the entire contents of a fairly large (excel) table, I threw the whole thing in an <iframe>.

i.e



<iframe src="bigtable.xl" scrolling="yes"></iframe>





Yak



(Sorry about the double post. My computer/network was having a heart attack when I pressed the "submit post" button)

mrruben5
07-11-2005, 08:39 AM
erm... </iframe> :D

Yakisoba
07-11-2005, 08:57 AM
Oops...

Thanks for pointing that out mrruben5. I made the changes in both posts.

I guess I'm too comfortable having "autocomplete" turned on.

Yak

Col
07-11-2005, 12:47 PM
Not sure if this will help you but...

Last time I needed to load the entire contents of a fairly large (excel) table, I threw the whole thing in an <iframe>.

i.e



<iframe src="bigtable.xl" scrolling="yes"></iframe>



Not sure what you mean? Do you mean that this somehow solves the incompatabilty, or, as I suspect, you just mean I have a scrolling iframe.

That's not the problem. The problem I have have is to have a cross-browser scrolling table, WITH fixed, but scrolling reference header and side column. The reference header and side column will scroll with the main body of the table, just like the refereneces in an excel table. The code I posted works only with IE for some reason.

Does anyone know why it only works with IE? I assume it's a JS problem, but I have no experience at all with JS.

Thanks.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum