I know this is really ugly but it is just to see if I could get it in a page content type situation. It seems to work but will probably make more problems in the future so test it and let me know. Take not of the _javascript_ that is commented out.
Hope this does the trick.
Shane
- Show quoted text -
<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.>
window.>
syncResize();
}
</script>
</head>
<body >
<tr>
<td colspan="2">
<div>
<fieldset style="padding:5px;"><legend><b>Header</b></legend>
The header would go here
</fieldset>
</div>
</td>
</tr>
<tr>
<td valign="top" width="150">
<div>
<fieldset style="padding:5px; height:100%">
<legend><b>Navigation</b></legend>
<table height="100%">
<tr>
<td>Navigation goes here</td>
</tr>
</table>
</fieldset>
</div>
</td>
<td valign="top">
<div>
<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:100%;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>
<!-- extra rows removed for size reasons -->
<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>
</td>
</tr>
<tr>
<td colspan="2">
<fieldset style="padding:5px;"><legend><b>Footer</b></legend>
The footer would go here
</fieldset>
</td>
</tr>
</table>
</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/
