php table overflow problem
Hello!
Sorry if the title seems somewhat unclear, but basically I have a browser specific problem. I have a webpage built upon a table, and inside particular cells of this table are inner tables set to 100% height. My problem is that whenever data causes one cell of the table to overflow, stretching both the outer and inner table, the other columns of the outer table (containing tables) fail to update their height attributes in Firefox (until I refresh). So basically one column will extend to the bottom of the page, and the others, because they are nested tables, don't resize in accordance with the overflowing table.
So, I wanted to ask if anyone had a particular solution to my problem. As always, I appreciate all help in advance!
[769 byte] By [
SRD] at [2007-11-20 8:35:07]
# 1 Re: php table overflow problem
It is kind of hard to picture this without some sort of screenshot or diagram. Can you provide what it shows, and what it should look like?
P.S. I will ask to have this moved to client-side.
# 2 Re: php table overflow problem
It is odd because the problem only occurs occasionally when the page loads, but I managed to get a screen capture of it.
http://www.freewebtown.com/storageunit/example.GIF
The "[img]" tags don't seem to be working...
SRD at 2007-11-10 3:57:24 >
# 3 Re: php table overflow problem
Okay. I see your problem, but the solution is not so easy. First, when you define a table as 100% on a table inside a table, it doesn't always change with the movement of that table. You may have to walk the DOM to change it and reset the 100% heights.
Here is a walk the DOM example. You will have to alter it to work for your situation. You will need to
<script type="text/javascript">
function walkTheDOM(node){
if(node.tagName.toLowerCase() == 'table'){node.style.height = '100%';}
node = node.firstChild;
while(node){
this.walkTheDOM(node);
node = node.nextSibling;
}
}
</script>
<table id="outerTable"><tr><td>
<table><tr><td>
</td></tr></table>
<table><tr><td>
</td></tr></table>
<table><tr><td>
</td></tr></table>
<table><tr><td>
</td></tr></table>
<table><tr><td>
</td></tr></table>
</td></tr></table>
<script type="text/javascript">
var theTable = document.getElementById('outerTable');
walkTheDOM(theTable);
</script>
On every page resize you will need to call the walk the DOM.
