Now that's ugly... but it's a basic wireframe of my issue... the reason for the width="100%" is that the #body td that's 100% is made to expand depending on what's put in... so I need the entire table to expand, btu keeping the 1st and last cell's in each row to stay @ 30px, while ONLY hte middle column expands... this I've gotten, no problem.
The problem is... is in the first and last cell's of #body row... I need 3 images... a top image, a bottom image, and a repeating image (vertical) in the middle... I've tried with divs, but since the height of that cell can expand, I couldn't get the repeating to go all the way... now yes I could do bgimage on the cell, but the other images have some transparency and I don't want the repeating image to show under the top and bottom image.
Now I just went and tried to put this in the first and last #body row tds.
Now the problem with this is that the table doesn't go to 100% of the cell height... it's really just 430 px's high (2x200, and the spacer is going to 30x30 i've noticed)... so when the table the #body row is taller then 430pxs, the table doesn't stretch all the way in that cell.
I know this layout is ugly... I know this post may be a bit confusing... but if anyone can help that would be great :)
Basically I want a table to be 100% height of a variable height cell (without using javascript).
Question
DeathLace
Hey all...
So i have this page, a page that MUST be made using tables as the core structure... no ifs/ands or buts about it...
Here it my table structure.
<table width="980"> <tr id="header"> <td width="30"></td> <td width="100%"></td> <td width="30"></td> </tr> <tr id="body"> <td width="30"></td> <td width="100%"></td> <td width="30"></td> </tr> <tr id="footer"> <td width="30"></td> <td width="100%"></td> <td width="30"></td> </tr> </table>Now that's ugly... but it's a basic wireframe of my issue... the reason for the width="100%" is that the #body td that's 100% is made to expand depending on what's put in... so I need the entire table to expand, btu keeping the 1st and last cell's in each row to stay @ 30px, while ONLY hte middle column expands... this I've gotten, no problem.
The problem is... is in the first and last cell's of #body row... I need 3 images... a top image, a bottom image, and a repeating image (vertical) in the middle... I've tried with divs, but since the height of that cell can expand, I couldn't get the repeating to go all the way... now yes I could do bgimage on the cell, but the other images have some transparency and I don't want the repeating image to show under the top and bottom image.
Now I just went and tried to put this in the first and last #body row tds.
<table height="100%"> <tr> <td height="200"><img blah blah height="200"></td> </tr> <tr height="100%"> <td height="100%" bgimage="src"> <img src="spacer" height="100%"> </td> </tr> <tr> <td height="200"><img blah blah height="200"></td> </tr> </table>Now the problem with this is that the table doesn't go to 100% of the cell height... it's really just 430 px's high (2x200, and the spacer is going to 30x30 i've noticed)... so when the table the #body row is taller then 430pxs, the table doesn't stretch all the way in that cell.
I know this layout is ugly... I know this post may be a bit confusing... but if anyone can help that would be great :)
Basically I want a table to be 100% height of a variable height cell (without using javascript).
Link to comment
Share on other sites
9 answers to this question
Recommended Posts