Forcing table width

Discussion in 'HTML' started by John Wood, Apr 15, 2004.

  1. John Wood

    John Wood Guest

    I've noticed that a table cell width is ignored if the content contains
    words that (themselves) are wider than the specified width. The table just
    grows width-wise.

    Is there any way to stop this?

    I'm trying to get my tables to fit 640px wide, but the content frequently
    makes them bleed off the page.

    TIA,
    John
    John Wood, Apr 15, 2004
    #1
    1. Advertising

  2. "John Wood" <> wrote:

    > Is there any way to stop this?


    CSS might do it.

    The Doormouse

    --
    The Doormouse cannot be reached by e-mail without her permission.
    The Doormouse, Apr 15, 2004
    #2
    1. Advertising

  3. John Wood wrote:
    > I've noticed that a table cell width is ignored if the content
    > contains words that (themselves) are wider than the specified width.
    > The table just grows width-wise.
    >
    > Is there any way to stop this?
    >
    > I'm trying to get my tables to fit 640px wide, but the content
    > frequently makes them bleed off the page.


    Wrap the content of those cells into a <div>, then control the <div> via CSS.

    <td>
    <div class="something">
    stuff goes here
    </div>
    </td>

    div.something {
    width: 200px;
    height: 300px;
    overflow: auto;
    }

    Tables are wonderfully flexible, adapting to the user's environment such as
    text size & viewport width. This is fully within the spirit of the web, with
    fluid design conforming to the needs and preferences of the users.

    But sometimes this is a problem for authors. So don't try to control the
    tables directly. You can't. Control their content instead. Then the table will
    adapt to the controlled content. If you wrap the content in a <div>, and
    control the <div>, the table will adapt, and the <div> will shield the table
    from its contents.

    In the above CSS, the { overflow: auto } will give scrollbars *if needed*.
    Alternatively, you could use { overflow: hidden } and hide the extra stuff.

    --
    Barry Pearson
    http://www.Barry.Pearson.name/photography/
    http://www.BirdsAndAnimals.info/
    http://www.ChildSupportAnalysis.co.uk/
    Barry Pearson, Apr 15, 2004
    #3
  4. Barry Pearson wrote:

    > John Wood wrote:
    >> I've noticed that a table cell width is ignored if the content
    >> contains words that (themselves) are wider than the specified width.
    >> The table just grows width-wise.
    >>
    >> Is there any way to stop this?
    >>
    >> I'm trying to get my tables to fit 640px wide, but the content
    >> frequently makes them bleed off the page.


    Why not reduce the content then?

    > Wrap the content of those cells into a <div>, then control the <div> via
    > CSS.
    >
    > <td>
    > <div class="something">
    > stuff goes here
    > </div>
    > </td>
    >
    > div.something {
    > width: 200px;
    > height: 300px;
    > overflow: auto;
    > }


    Why not apply the CSS directly to the table data cell?


    --
    David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
    David Dorward, Apr 15, 2004
    #4
  5. David Dorward wrote:
    > Barry Pearson wrote:
    >> John Wood wrote:
    >>> I've noticed that a table cell width is ignored if the content
    >>> contains words that (themselves) are wider than the specified width.
    >>> The table just grows width-wise.
    >>>
    >>> Is there any way to stop this?
    >>>
    >>> I'm trying to get my tables to fit 640px wide, but the content
    >>> frequently makes them bleed off the page.

    >
    > Why not reduce the content then?


    The size of the content is often not under the control of the author. Tables
    are wonderfully flexible, adapting to the user's environment such as text size
    & viewport width. This is fully within the spirit of the web, with fluid
    design conforming to the needs and preferences of the users.

    But the layout concept may want control of the width and/or height. At least
    for some cells.

    >> Wrap the content of those cells into a <div>, then control the <div>
    >> via CSS.
    >>
    >> <td>
    >> <div class="something">
    >> stuff goes here
    >> </div>
    >> </td>
    >>
    >> div.something {
    >> width: 200px;
    >> height: 300px;
    >> overflow: auto;
    >> }

    >
    > Why not apply the CSS directly to the table data cell?


    See above. It doesn't work. Tables typically override CSS controls. Tables
    adapt to their content. So control their content instead.

    Experiment. Compare controlling table cells with controlling the contents of
    tables cells. The difference is amazing.

    --
    Barry Pearson
    http://www.Barry.Pearson.name/photography/
    http://www.BirdsAndAnimals.info/
    http://www.ChildSupportAnalysis.co.uk/
    Barry Pearson, Apr 15, 2004
    #5
  6. John Wood

    John Wood Guest

    Actually controlling the content in this case is difficult. The table has
    alternating spanning column rows containing a lot of text. If any of the
    words are unable to wrap correctly, the table resizes... I could look
    through all the text and put a maximum width on each word, but the overhead
    of doing that may be too large. I'd rather put the processing overhead on
    the client.

    The div solution does work, but does slow down with larger tables... and I
    have yet to see how it works in browsers such as Safari.

    Thanks all for your suggestions!

    "Barry Pearson" <> wrote in message
    news:qbDfc.26$mQ3.11@newsfe1-win...
    > David Dorward wrote:
    > > Barry Pearson wrote:
    > >> John Wood wrote:
    > >>> I've noticed that a table cell width is ignored if the content
    > >>> contains words that (themselves) are wider than the specified width.
    > >>> The table just grows width-wise.
    > >>>
    > >>> Is there any way to stop this?
    > >>>
    > >>> I'm trying to get my tables to fit 640px wide, but the content
    > >>> frequently makes them bleed off the page.

    > >
    > > Why not reduce the content then?

    >
    > The size of the content is often not under the control of the author.

    Tables
    > are wonderfully flexible, adapting to the user's environment such as text

    size
    > & viewport width. This is fully within the spirit of the web, with fluid
    > design conforming to the needs and preferences of the users.
    >
    > But the layout concept may want control of the width and/or height. At

    least
    > for some cells.
    >
    > >> Wrap the content of those cells into a <div>, then control the <div>
    > >> via CSS.
    > >>
    > >> <td>
    > >> <div class="something">
    > >> stuff goes here
    > >> </div>
    > >> </td>
    > >>
    > >> div.something {
    > >> width: 200px;
    > >> height: 300px;
    > >> overflow: auto;
    > >> }

    > >
    > > Why not apply the CSS directly to the table data cell?

    >
    > See above. It doesn't work. Tables typically override CSS controls. Tables
    > adapt to their content. So control their content instead.
    >
    > Experiment. Compare controlling table cells with controlling the contents

    of
    > tables cells. The difference is amazing.
    >
    > --
    > Barry Pearson
    > http://www.Barry.Pearson.name/photography/
    > http://www.BirdsAndAnimals.info/
    > http://www.ChildSupportAnalysis.co.uk/
    >
    >
    John Wood, Apr 16, 2004
    #6
  7. John Wood

    Mark Parnell Guest

    Mark Parnell, Apr 19, 2004
    #7
    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:
    773
    Bruce Barker
    Oct 10, 2005
  2. Sean Jorden
    Replies:
    1
    Views:
    594
    laurie
    Aug 19, 2003
  3. kris
    Replies:
    11
    Views:
    873
  4. David Basford
    Replies:
    3
    Views:
    2,421
    BootNic
    Sep 30, 2007
  5. Replies:
    1
    Views:
    740
    Beauregard T. Shagnasty
    Dec 29, 2007
Loading...

Share This Page