Making a <td> as small a width as possible

[Nathan Sokalski]

I have a <td> that contains several elements, some of which are
left-aligned, right-aligned, or centered. I do not know the widths of these
elements beforehand, so I cannot give my <td> a fixed width. I want the <td>
to have as small a width as possible without causing anything to wrap, but
IE seems to want to make it bigger. Does anybody know of a good way to
prevent a <td> from being stretched to a larger width than necessary?
Thanks.

 

[Mark Rae [MVP]]

[cross-posting removed]

I have a <td> that contains several elements, some of which are
left-aligned, right-aligned, or centered. I do not know the widths of these
elements beforehand, so I cannot give my <td> a fixed width. I want the
<td> to have as small a width as possible without causing anything to wrap,
but IE seems to want to make it bigger. Does anybody know of a good way to
prevent a <td> from being stretched to a larger width than necessary?

A <td> will expand to fit its contents. However, if other rows have more
data in the corresponding cell, then obviously the entire column will expand
to fit the contents of the largest cell.

Check in View Source for what markup is actually being included in the cell
in question...

 

[Nathan Sokalski]

Here is an example of a <td> using more space than necessary:

<table>
<tr>
<td>
<span style="float:left;">Float Left</span>
<span style="float:right;">Float Right</span><br/>
<div
style="width:500px;height:500px;background-color:Orange;">&nbsp;</div>
</td>
</tr>
</table>

You will notice that neither the table or td has a set width, but the float
right hangs over the edge of the div. The table could easily be no more than
the width of the div (in this case 500px) and still fit both span tags in.
Do the floats have anything to do with the problem? I use floats because I
want the spans on the left and right of the same line, and in my code the
width of the div is dynamic (my code also involves more cells than this).
--
Nathan Sokalski
(e-mail address removed)
http://www.nathansokalski.com/

[cross-posting removed]

I have a <td> that contains several elements, some of which are
left-aligned, right-aligned, or centered. I do not know the widths of
these elements beforehand, so I cannot give my <td> a fixed width. I want
the <td> to have as small a width as possible without causing anything to
wrap, but IE seems to want to make it bigger. Does anybody know of a good
way to prevent a <td> from being stretched to a larger width than
necessary?

A <td> will expand to fit its contents. However, if other rows have more
data in the corresponding cell, then obviously the entire column will
expand to fit the contents of the largest cell.

Check in View Source for what markup is actually being included in the
cell in question...

 

[Singapore Web Design]

Hello,

If the containing table and td have no width set, the td width will be the
size of the column.

To prevent the wrapping, use the nowrap attribute. See
http://www.htmlcodetutorial.com/tables/_TD_NOWRAP.html

--
Singapore Web Design
http://www.bootstrike.com/Webdesign/
Singapore Web Hosting
http://www.bootstrike.com/WinXP/faq.html
Windows XP FAQ

 

[Guest]

Here is an example of a <td> using more space than necessary:

<table>
<tr>
<td>
<span style="float:left;">Float Left</span>
<span style="float:right;">Float Right</span><br/>
<div
style="width:500px;height:500px;background-color:Orange;"> </div>
</td>
</tr>
</table>

Hi Nathan

you have to set clear:both to make the div element go below

<div style="CLEAR:BOTH;width:500px;height:500px;background-
color:Orange;">

Hope it helps