Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    Regular Coder
    Join Date
    Jul 2002
    Posts
    124
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Stop table expanding with text

    I'm sure this has been asked many a time, but...

    I have a table with various rows and columns. I want to put a new row using colspan for the number of columns in the table. The rest of the table just has a word or figure in each cell. Now I want to put a long text paragraph. Of course the text just expands the table to the width of the screen. Messy. Can I do something to make the table width dependent on all the rows EXCEPT this one? I.e, so the text wraps according to the existing width of the table?

    Much obliged for any help!

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    you could use the p tag and just use css to add a width to it that is no wider than the width of the table or in that td cell without using the p tag u can add nowrap to it and the text shouldn't expand the tabl
    code for p tag with width defined by css
    Code:
    <p style="width:300px;">your paragraph text here</p>

  • #3
    Regular Coder
    Join Date
    Jul 2002
    Posts
    124
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry, I can't see the code you posted. I guess because I'm on an old Mac. Could you post it not between the tags?

    Thanks a lot.

    By the way, guessing at your coding here, I don't want to set a width for the table. The width is determined by the contents. It's a CMS not a web page.

    Cheers

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    but if it is a table u can use the nowrap thing in a td cell
    <table>
    <tr>
    <td nowrap>your text here</td>
    </tr>
    </table>
    or
    <table>
    <tr>
    <td><p style="width:300px;">your paragraph text here</p></td>
    </tr>
    </table>
    one of those ways should work

  • #5
    Regular Coder
    Join Date
    Jul 2002
    Posts
    124
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The nowrap causes it not to wrap, but I WANT it to wrap. But I want it to wrap at the width set by the rest of the table. Using the inline style requires me to stipulate a width for the paragraph. I don't want to declare a width - I want the table to decide.

    In short, all the other contents can expand the table as necessary, but this paragraph should wrap within whatever width the rest of the table is. I don't know in advance what that width will be. It could be different every time as it will include data from a database.

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Information

    "My car won't start; can you tell me what's wrong? It's a blue one."

    If you don't supply any detailed information it's nearly impossible to give conclusive answers; guesswork is all that remains.
    Text consisting of words, separated by spaces should wrap; are there any non-breaking spaces (&nbsp) in there, perhaps?
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #7
    Regular Coder
    Join Date
    Jul 2002
    Posts
    124
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's because I thought my question was of a general nature. Here's some code:

    <table cellspacing="0" cellpadding="0" border="0" width="100%" height="85%"><tr><td align="center">

    <table cellpadding="1" cellspacing="0" bgcolor="navy" border="0" bordercolor="black">
    <tr align=center><font size="2"><td>&nbsp;From&nbsp;</td><td>&nbsp;Stu#&nbsp;</td><td background=bg.gif>&nbsp;</td><td>&nbsp;<b>TOTAL</b>&nbsp;</td><td background=bg.gif>&nbsp;</td><td>&nbsp;Fees&nbsp;</td><td>&nbsp;Materials&nbsp;</td><td>&nbsp;Advance&nbsp;</td><td>&nbsp;Other&nbsp;</td><td background=bg.gif>&nbsp;</td><td align="center">&nbsp;Source&nbsp;</td></font></tr>

    <tr><td><?php echo $some_php_vraiables?></td><td>...and others.....</td></tr>
    .
    .
    .

    <tr><font size=2><td colspan="19" style='border-top:solid white 1px; padding:2px; color:orange;overflow=auto'>
    <u>Note</u>: The above figures are for <?php echo $usemlong;?>. If you are is per the server time in the top right of the screen. Depending on where your server is, this could mean it is still the <i>previous</i> month - or has become the <i>next</i> month - at your server\'s location! The list above could therefore contain fees that were due last month, or omit fees that are due this month.<br>If this is the case you can either wait or, in any case, choose a different month:

    <select name="whmth">
    <option selected value="<?php echo $tmx;?>"><?php echo $tm;?></option>
    <option value="<?php echo $lmx;?>"><?php echo $lm;?></option>
    <option value="<?php echo $nmx;?>"><?php echo $nm;?></option>
    </select>
    and click:

    <input type="submit" name="submit" value="Another month" class="button" />


    </td></font></tr></table>
    </td></tr></table>

    --------------------------------------------------------------------------
    Without the final <tr>...</tr> it stretches about two thirds across the width of the screen. This paragraph stretches it right across the screen. I want to keep it to the same two-thirds.

    The general question is: in a table with a number of rows, how can I make one row wrap to the width of the table as it exists without that row - the width of the table being determined by its contents rather than a defined width in any tag??

  • #8
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    General answer

    how can I make one row wrap to the width of the table as it exists without that row
    To the best of my knowledge: you can't. The width of the table is related to the width of all of it's rows, where the widest determines the table width.
    A table cell holding an amount of wrappable text will only shrink, forcing the text to wrap, if other reasons confine it's width. When no explicit width is set, and the contents of the various cells permit, a table will always shrink to fit the window width.

    I did a little testing, and IE/win seemingly selects a width for each cell depending on the amount of content, so that each cell is filled up about equally, hight-wise.

    I nagged you about being specific because general questions at best get general answers, which in my experience rarely help a lot.
    Also, a lot of general questions stem from much more specific ones; knowing the details can often help in finding more suitable solutions.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #9
    Regular Coder
    Join Date
    Jul 2002
    Posts
    124
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I had a feeling it couldn't be done. Shame, really, because it doesn't look so good. Either it goes right across the screen and leaves the contents of cells above looking lonely, or it's set to a width completely independent of the rest of the table...and looks just as ugly.

    Quote Originally Posted by ronaldb66
    I nagged you about being specific because general questions at best get general answers, which in my experience rarely help a lot.
    Also, a lot of general questions stem from much more specific ones; knowing the details can often help in finding more suitable solutions.
    You're right, of course

    Thanks.

  • #10
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Picture

    I'm really still having a hard time constructing a picture in my mind, but you could try to set explicit widths for those cells that have fixed-width content so these cells don't spread out so much.
    Another idea would be to set the table width to a silly minimum. That way, it will shrink-wrap all the cells' contents, and probably force your text to wrap, too.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #11
    Regular Coder
    Join Date
    Jul 2002
    Posts
    124
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Eureka!!!

    OK, here's what I did, and it seems to work.

    In the cells above the text section in question there are only numbers or names or other data with only 2 words. No other long text entries, so this may not be posible in other situations.

    Anyway, I set the width to a silly minimum, as you suggested. The names and 2-word entries had, of course, wrapped so I just put 'nowrap' in those td tags and it works a treat. I can do that easily because I'm getting the contents from a PHP loop.



    Thanks for your help.

    Oh, one last thing. Does 'nowrap' in the td tags work cross-browser, do you know?

  • #12
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    No wrap

    The nowrap attribute is part of the HTML 4.01 specification and should therefore be supported by compliant browsers -and I expect most of them do, but this attribute is deprecated.
    Instead, CSS should really be used in the form of the white-space property: "white-space: nowrap;". You could use a class for those cells that need to not wrap (is that even proper english?) and control it through one simple rule.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #13
    Regular Coder
    Join Date
    Jul 2002
    Posts
    124
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the info and tip. CSS it is...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •