Solved

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

Posted on 2003-11-26
4
1,053 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
  • 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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Suggested Solutions

Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

708 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now