Solved

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

Posted on 2003-11-26
4
1,057 Views
Last Modified: 2010-04-09
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>        
0
Comment
Question by:CodeMachine
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 6

Expert Comment

by:dgelinas
ID: 9827277
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
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 200 total points
ID: 9827603
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
 

Author Comment

by:CodeMachine
ID: 9851962
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 9854102
I think just checking for undefined is okay, though I'm not sure I quite understand why you are eliminating IDs.

Cd&
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

740 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question