"Dominant" <TD>

How to change which one stretches

[adni18]

Hi. Say I have a 2 column table, and both td tags on the top have background images.

I have another row, with one <TD> tag, colspan of 2. Now, how can I make the first column be just wide enough to support the text, while the other one stretches to fit the excess width the lower part takes up?

For you vision-oriented programmers (probably most of you in CSS are) out there, an example:

<table>
<TR>
<TD bgcolor=green>
Top left
</TD>
<TD bgcolor=red>
</TD>
</TR>
<TR>
<TD colspan=2>
hello there, guys at CSS! See what I mean? The left stretches, rather than the right. How can I fix it so the second column stretches, leaving the left column at its minimum width?
</TD>
</TR>
</table>

[jollymcfats]

I use this:

td.expand { width: 100%; }

[adni18]

Unfortunately, the table does not span the entire page on my website, and I want it to not wrap the text, just expand the left td to fit the text inside.

[rocknbil]

Well it's a "hack" but if you use

<TD bgcolor=red>
&nbsp;
</TD>

or

<TD bgcolor=red>
<img src="spacer.gif" width="100" height="1">
</TD>

It will work, but no way I know of to get the exact width of the text on any system and apply it to another cell.

[pageoneresults]

Sounds like you want to assign a nowrap to that one <td>. I do it through CSS...

.nw{white-space:nowrap;}

And then a class assigned to the <td>...

<td class="nw" ...>

[SuzyUK]

.. the table-layout property [w3.org] might be the key..

CSS:
table {width: 100%; table-layout: fixed;}
td.topleft {background: #0f0; width: 100px;} /* set top left cell's fixed width here */
td.topright {background: #f00;}

HTML:
<table>
<tr>
<td class="topleft">Top left</td>
<td class="topright">Top Right</td>
</tr>
<tr>
<td colspan="2" >loads of text..... ........... .......... ...........</td>
</tr>
</table>

[jollymcfats]

Or this on the TD you'd like to be minimally sized.

table { table-layout: auto; }
td.minimal { width: 1%; white-space: nowrap; }

_{edit reason: minimum content-width fiddling is only appropriate for the default auto layout.}

[edited by: jollymcfats at 12:02 am (utc) on Jan. 24, 2005]

[adni18]

Thanks, SuzyUK. There's still one problem. I can't control how long the text is going to be. It's generated at the server-side, drawn from a log. If the text is too long, it wraps (in your script).

[SuzyUK]

Hi adni.. that's Ok it will do I was basing it on a image or something fixed at that minimal width.

..but in that case use jollymcfats's solution (msg #7), it's a teeny weeny hack, but it works ;)
and yes don't used the fixed table layout with that method.

Suzy