Making a <td> as small a width as possible

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Nathan Sokalski - 06 Oct 2007 01:37 GMT

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.

Signature

Nathan Sokalski
njsokalski@hotmail.com
http://www.nathansokalski.com/

Reply to this Message

Mark Rae [MVP] - 06 Oct 2007 02:16 GMT

[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...

Signature

Mark Rae
ASP.NET MVP
http://www.markrae.net

Reply to this Message

Nathan Sokalski - 06 Oct 2007 03:20 GMT

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>

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).

Signature

Nathan Sokalski
njsokalski@hotmail.com
http://www.nathansokalski.com/

> [cross-posting removed]
>
[quoted text clipped - 12 lines]
> Check in View Source for what markup is actually being included in the
> cell in question...

Reply to this Message

Alexey Smirnov - 06 Oct 2007 13:36 GMT

> Here is an example of a <td> using more space than necessary:
>
[quoted text clipped - 8 lines]
> </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

Reply to this Message

Singapore Web Design - 06 Oct 2007 12:04 GMT

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

Signature

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

>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
[quoted text clipped - 3 lines]
>prevent a <td> from being stretched to a larger width than necessary?
>Thanks.

Reply to this Message

Making a <td> as small a width as possible

Free Magazines