Table: 100% width, 2 cols 100px, 1 col stretch to fit - possible?

liunx · Jan 10, 2008

I have a table that stretches across the page regardless of screen res using the width="100%" command. The table has one row and 3 columns and is left aligned. I want to specify the first two column cells with width values, but want the last column cell to stretch to the right screen edge, however far that might be (depends on screen res). Is this possible? 
 
eg. If I was using Frames the command would be "*". Width="*" doesn't appear to work with tables, nor does just leaving the width out in the right cell? 
 
Help appreciated.Do you mean that this wouldn't work? 
 
<table width="100%"> 
<tr> 
<td width="50"> </td> 
<td width="50"> </td> 
<td> </td> 
</tr> 
</table> 
 
 
Bonkom

imp:you musn't have done something right because it should work, here's a little example: 
 
 
<table cellpadding="0" cellspacing="0" border="1" style="width:100%;"> 
<tr> 
<td style="width:100px;"> </td> 
<td style="width:100px;"> </td> 
<td> </td></tr></table> 
 
 
/added 
just beat me to it bonkom

'width' is deprecated in favour of css

I think the problem may be that I've embedded table within a table and it doesn't seem to act the same when I do that. 
 
Here's my code: 
 
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td bgcolor=yellow height="390"></td> 
</tr> 
<tr> 
<td bgcolor=red height="22"> 
 
<table width="100%" height="10" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td bgcolor=black width="100"></td> 
<td bgcolor=grey width="100"></td> 
<td bgcolor=black></td> <----------------the offending line that seems to be ignored. I need a black strip to extend to the all the way to the edge of the screen. 
</tr> 
</table> 
 
</td> 
</tr> 
<tr> 
<td bgcolor=yellow></td> 
</tr> 
</table> 
 
also notice in this version the width="100" are being ignored also. If I remove the width="100%" from the table the two 100 width cells are 100, but that third line in the embedded table is just ignored? 
 
Code with width="100%" removed from embedded table: 
 
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td bgcolor=yellow height="390"></td> 
</tr> 
<tr> 
<td bgcolor=red height="22"> 
 
<table height="10" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td bgcolor=black width="100"></td> 
<td bgcolor=grey width="100"></td> 
<td bgcolor=black></td> 
</tr> 
</table> 
 
</td> 
</tr> 
<tr> 
<td bgcolor=yellow></td> 
</tr> 
</table> 
 
Notice also that the outside table works just as you said (390 high strip, a 22 high strip, and the bottom strip is unspecified but stretches to the bottom of the page. However, I can't get the embedded table to do something similar. I can't see any difference between the main table and the embedded table though?that is why you need   in your table cells like Leo has in his. 
 
most browsers (the good ones anyway) will not render a table if it is empty.Try adding in some content to the cells just a space (&nbsp

would do. 
 
Also it is good practice to put the colors in quotes just the same as you have done with the widths and convert the color names to hex values 
 
Bonkom

imp: 
 
EDIT Scoutt beat me to itAdding &nbsp or spaces or text doesn't change anything I'm afraid.try copying the code from leo's post into the td that you want to have this table in then modify the colors. there is no reason that this should not work. 
 
Bonkom

imp:really?? that is funny cause it works for meYep, thx for your help. You were right, the nbsp; worked, I just was swapping and changing so many things I never had the right combination of width=100% in the <table> tag and the nbsp; in the <td> line.

Table: 100% width, 2 cols 100px, 1 col stretch to fit - possible?

liunx

Guest