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/
