scrollable table in div with a header not in hte div. Dynamic Properties? or?

I am trying to use ie dynamic properties to format a head for a table that is contained in a div.
the div wont go to only part of the table becasue of the table dom. I want the header cells to match the content cells exactly. I am very close but the browere does whatever it wants. This is an ie specific project.

Here is the code. (non-relative stuf removed). I am not tied to dynamic properties it just seems like the best way and i have tried a LOT of stuff. can anyone do this succesfully?

I could prolly just go by the row size to match the table size but that part is working great.

<table id="redHeadTbl" border="0" style="border-layout:fixed" cellpadding="3" cellspacing="3" style="width:expression(document.all['col1'][0].clientWidth + document.all['col2'][0].clientWidth +document.all['col3'][0].clientWidth +document.all['col4'][0].clientWidth +document.all['col5'][0].clientWidth +document.all['col6'][0].clientWidth +document.all['col7'][0].clientWidth +document.all['col8'][0].clientWidth +27);">
                  
<td id="redHead1" style="width:expression(document.all['col1'][0].clientWidth);" class="clsTblHead">Task ID</td>
<td id="redHead2" style="width:expression(document.all['col2'][0].clientWidth);" class="clsTblHead">Physician</td>
<td id="redHead3" style="width:expression(document.all['col3'][0].clientWidth);" class="clsTblHead">Clinic</td>
<td id="redHead4" style="width:expression(document.all['col4'][0].clientWidth);" class="clsTblHead">Patient</td>
<td id="redHead5" style="width:expression(document.all['col5'][0].clientWidth);" class="clsTblHead">Description</td>
<td id="redHead6" style="width:expression(document.all['col6'][0].clientWidth);" class="clsTblHead">Status</td>
<td id="redHead7" style="width:expression(document.all['col7'][0].clientWidth);" class="clsTblHead">Posted</td>
<td id="redHead8" style="width:expression(document.all['col8'][0].clientWidth);" class="clsTblHead">Assigned</td>

Then the table i want to match up with

<table border="0"  cellpadding="3" cellspacing="3" width="100%">
<td id="col1" width="7%" class="clsTblData1" valign="top"><bean:write name="redTaskList" property="taskId" /></td>
<td id="col2" width="15%" class="clsTblData1" valign="top"></td>
<td id="col3" width="15%" class="clsTblData1" valign="top"></td>
<td id="col4" width="15%" class="clsTblData1" valign="top"></td>
<td id="col5" width="10%" class="clsTblData1" valign="top"></td>
<td id="col6" width="10%" class="clsTblData1" valign="top"></td>
<td id="col7" width="10%" class="clsTblData1" valign="top"></td>
<td id="col8" width="8%" class="clsTblData1" valign="top"></td>        
CodeMachineAsked:
Who is Participating?
 
COBOLdinosaurCommented:
You are referencing elements in the expressions that may not be known at the time they are encountered during rendering.  That can cause IE to either make mistakes or ignore the attribute.  If you script the expression attributes and fire them at the end of the load, then the DOM is complete and you do not get any invalid references.  Also you have a style entry border-layout:fixed but I think you mean table-layout:fixed. There is no such attribute as border-layout.

<html>
<head>
<script language="javascript">
window.onload = init;
function init() {
var eTable = document.getElementById("headers");
eTable.style.setExpression("width","document.getElementById('data').offsetWidth");
document.getElementById('th1').style.setExpression("width","document.getElementById('td1').offsetWidth");
document.getElementById('th2').style.setExpression("width","document.getElementById('td2').offsetWidth");
document.getElementById('th3').style.setExpression("width","document.getElementById('td3').offsetWidth");
document.getElementById('th4').style.setExpression("width","document.getElementById('td4').offsetWidth");
}
</script>
<style>
table#headers, table#data {table-layout:fixed;background:#dda0dd;}
td, th {vertical-align:top;background:#ffffff;}
</style>
</head>
<body>
<table cellpadding="4" cellspacing="1" id="headers">
<tr>
<th id="th1">Test</th>
<th id="th2">Hello</th>
<th id="th3">Yoohoo</th>
<th id="th4">Hmm</th>
</tr>
</table>
<div style="width:100%;height:300px;overflow-y:auto;">
<table cellpadding="4" cellspacing="1" width="100%" id="data">
<tr>
<td id="td1">Data</td>
<td id="td2">Hello</td>
<td id="td3">I am here and so are you</td>
<td id="td4">Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
</table>
</div>
</body>
</html>

Cd&

0
 
dgelinasCommented:
I had a similiar problem that was fixed with this function.  It gets the Header table and the body table.

function sizeTable () {

var topTable = (document.all) ? document.all.timeCardTableHead : document.getElementById("timeCardTableHead");
var botTable = (document.all) ? document.all.timeCardTableBody : document.getElementById("timeCardTableBody");
var width;
 
var numberOfVisibleColumns = topTable.rows[0].cells.length;
 
  for (var c=0; c<numberOfVisibleColumns; c++ ) {
    if ( topTable.cells(c).offsetWidth < botTable.cells(c).offsetWidth ) {
      width = botTable.cells(c).offsetWidth;
      topTable.cells(c).width = width;
      botTable.cells(c).width = width;
    }
  }
  headStuff.style.height = headTable.clientHeight + scrollHeight;
}

good luck
0
 
CodeMachineAuthor Commented:
dgelinas good method nice and reusable. but it is really no diferent than what i am doing... just a little furhter along in the sdlc. Gonna have to give the points to cobolDin.

table-layout:fixed cured my problem. DUH... Good eye. thanks a lot.

Could i get one more suggestion from you on how to deal with 0 - 1 - or more rows in the defining table?

To be more clear is there an easy way handle the javascript changes required fordocument.all['col2'][0].clientWidth vs. document.all['col2'].clientWidth. I am currently planning on handling this by using jsp script to only assign the id="col2" to the first column.

But then there is the issue of what if there are no columns. I am thinking i will just use if(whatever != undefined). then give a default val
0
 
COBOLdinosaurCommented:
I think just checking for undefined is okay, though I'm not sure I quite understand why you are eliminating IDs.

Cd&
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.