Chad, This has nothing to do with your problem, yet if I see what your doing is correct in my thinking then if you ever get the table header on the outside to match the sizes of the table on the other div (scrollable area) let me know.
I have been trying to find a solution to have table headers for something we are working on here for 2 years now with out any success, on the outside so that the scrollable area would match the, can never get the columns to match. Now this is provided I am right in were your going with this sample. Regards Andrew Scott Analyst Programmer CMS Transport Systems Level 2/33 Bank Street South Melbourne, Victoria, 3205 Phone: 03 9699 7988 - Fax: 03 9699 7976 -----Original Message----- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Chad Renando Sent: Tuesday, 19 July 2005 10:43 AM To: CFAussie Mailing List Subject: [cfaussie] OT: relatively absolute positioning / maintaining table headers Nothing to do with CF (yet), working on maintaining table headers while scrolling table data. I am trying to do something like this: http://203.89.231.233/06/prism/cssforumpost.htm Works great, table header stays in the same place. How do I go about moving the table? If I put it in another table, it does this: http://203.89.231.233/06/prism/cssforumpost2.htm I figure it has something to do with the absolute positioning. How do I position a div absolutely relative to another div? Code for example 1 is below. Chad who understands if this question is shunned for it's off-topicness <html> <head> <style> table#headers {table-layout:fixed;background:#eea033;} table#data {table-layout:relative;background:#eea033;} td, th {vertical-align:top;background:#ffffff;} </style> <script language="javascript"> var rh; var fr; var ds; var hs; function syncScroll(e) { hs.scrollLeft = ds.scrollLeft; } function syncResize(e) { hs.style.width = ds.offsetWidth-(ds.offsetWidth - ds.clientWidth); for( i =0; i < rh.childNodes.length; i++ ) { rh.childNodes[i].width = fr.childNodes[i].offsetWidth; } } function init() { rh = document.getElementById("rh"); fr = document.getElementById("fr"); ds = document.getElementById("ds"); hs = document.getElementById("hs"); if ( navigator.userAgent.toLowerCase().indexOf( 'gecko' ) != -1 ) { hs.style.overflow='-moz-scrollbars-none'; } hs.style.top = ds.offsetTop; hs.style.left = ds.offsetLeft; hs.style.visibility = 'visible'; ds.onscroll=syncScroll; window.onresize=syncResize; syncResize(); } </script> </head> <body onload='init();'> <div style="overflow:hidden;z-index=3;visibility:hidden;position:absolute;" id='hs'> <table cellpadding="0" cellspacing="1" id="headers" width="100%"> <tr id='rh'> <th>col1</th> <th>col2</th> <th>col3</th> <th>col4</th> <th>col5</th> <th>col6</th> <th>col7</th> <th>col8</th> <th>col9</th> <th>col10</th> <th>col11</th> </tr> </table> </div> <div style="width:90%;height:400px;overflow:auto;z-index=2;" id='ds'> <table cellpadding="0" cellspacing="1" width="100%" id="data"> <tr id='fr'> <th>col1</th> <th>col2</th> <th>col3</th> <th>col4</th> <th>col5</th> <th>col6</th> <th>col7</th> <th>col8</th> <th>col9</th> <th>col10</th> <th>col11</th> </tr> <tr> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>thisisawidthtest-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> </tr> <tr> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> </tr> <tr> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> </tr> <tr> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> </tr> <tr> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> </tr> <tr> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> </tr> <tr> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> </tr> <tr> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> </tr> <tr> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> </tr> <tr> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> <td>this is a width test-- please tell me it works</td> </tr> </table> </div> </body> </html> --- You are currently subscribed to cfaussie as: [EMAIL PROTECTED] To unsubscribe send a blank email to [EMAIL PROTECTED] Aussie Macromedia Developers: http://lists.daemon.com.au/ --- You are currently subscribed to cfaussie as: [email protected] To unsubscribe send a blank email to [EMAIL PROTECTED] Aussie Macromedia Developers: http://lists.daemon.com.au/
