Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Col
    Col is offline
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Fully scrollable table. - How?

    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.

  • #2
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Use thead and tbody, and set overflow:auto with css on tbody :P
    CATdude about IE6: "All your box-model are belong to us"

  • #3
    Col
    Col is offline
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by mrruben5
    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...c+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:

    Code:
    <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.

  • #4
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #5
    Col
    Col is offline
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    Code:
    <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>

  • #6
    Regular Coder
    Join Date
    Feb 2005
    Location
    Tokyo, Japan
    Posts
    151
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Code:
    <iframe src="bigtable.xl" scrolling="yes"></iframe>


    Yak
    Last edited by Yakisoba; 07-11-2005 at 08:49 AM. Reason: mrruben5

  • #7
    Regular Coder
    Join Date
    Feb 2005
    Location
    Tokyo, Japan
    Posts
    151
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Code:
    <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)
    Last edited by Yakisoba; 07-11-2005 at 08:50 AM. Reason: mrruben5

  • #8
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    erm... </iframe>
    CATdude about IE6: "All your box-model are belong to us"

  • #9
    Regular Coder
    Join Date
    Feb 2005
    Location
    Tokyo, Japan
    Posts
    151
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #10
    Col
    Col is offline
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Yakisoba
    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
    Code:
    <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.
    Last edited by Col; 07-11-2005 at 12:49 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •