Making a <td> as small a width as possible

Discussion in 'ASP .Net' started by Nathan Sokalski, Oct 6, 2007.

  1. 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.
    --
    Nathan Sokalski

    http://www.nathansokalski.com/
     
    Nathan Sokalski, Oct 6, 2007
    #1
    1. Advertising

  2. "Nathan Sokalski" <> wrote in message
    news:...

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


    --
    Mark Rae
    ASP.NET MVP
    http://www.markrae.net
     
    Mark Rae [MVP], Oct 6, 2007
    #2
    1. Advertising

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

    http://www.nathansokalski.com/

    "Mark Rae [MVP]" <> wrote in message
    news:...
    > "Nathan Sokalski" <> wrote in message
    > news:...
    >
    > [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...
    >
    >
    > --
    > Mark Rae
    > ASP.NET MVP
    > http://www.markrae.net
     
    Nathan Sokalski, Oct 6, 2007
    #3
  4. 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

    "Nathan Sokalski" <> wrote in message
    news:...
    >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.
    > --
    > Nathan Sokalski
    >
    > http://www.nathansokalski.com/
    >
     
    Singapore Web Design, Oct 6, 2007
    #4
  5. On Oct 6, 4:20 am, "Nathan Sokalski" <> wrote:
    > 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
     
    Alexey Smirnov, Oct 6, 2007
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. AndrewF
    Replies:
    1
    Views:
    850
    Bruce Barker
    Oct 10, 2005
  2. Dan Stromberg
    Replies:
    3
    Views:
    307
    Paddy
    Sep 25, 2007
  3. Merrigan
    Replies:
    4
    Views:
    612
    Chris
    Dec 14, 2007
  4. Marin Brkic
    Replies:
    6
    Views:
    323
    Larry Bates
    Sep 25, 2008
  5. RMZ
    Replies:
    2
    Views:
    215
    David Mark
    Aug 2, 2007
Loading...

Share This Page