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 10 of 10
  1. #1
    New Coder
    Join Date
    Jul 2006
    Posts
    39
    Thanks
    7
    Thanked 0 Times in 0 Posts

    How to prevent long text in a TD from skewing the entire table?

    For example:
    <table border="1" cellpadding="0" cellspacing="0" valign="top"
    width="250">
    <tr><td>LongUnbrokenWordLongUnbrokenWordLongUnbrok enWord</td></tr>
    </table>


    Is it possible to make the long unbroken word to just appear under adjacent td's and thus not be visible? I want the td to remain at a maximum width.

    Thanks for the help

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    http://www.hotdesign.com/seybold/

    Generally, it is considered that tables should only be used for tabular data. CSS is the route to take for layout. As you have given no real indication of your site, I may be wrong in this case. However, take a look at the url given above.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    New Coder
    Join Date
    Jul 2006
    Posts
    39
    Thanks
    7
    Thanked 0 Times in 0 Posts


    Ok how would I accomplish the above without a table?

    Boxes a-e are aligned to top, have a fixed width which i specify in CSS, and have content which is dynamically generated. This means their heights can vary based on the data that occupies it.

    Box f is located below those divs and spans entire width.

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by harjanto View Post


    Ok how would I accomplish the above without a table?

    Boxes a-e are aligned to top, have a fixed width which i specify in CSS, and have content which is dynamically generated. This means their heights can vary based on the data that occupies it.

    Box f is located below those divs and spans entire width.
    Why does that create a problem?
    http://www.mardiros.net/liquid-css-layouts.html - How to transform fixed table layouts to liquid CSS based layouts
    http://www.dynamicdrive.com/style/bl...height-script/
    http://www.projectseven.com/tutorials/CSS/pvii_columns/


    will this help?

    Frank
    Last edited by effpeetee; 02-24-2008 at 11:24 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,859
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Code:
    #wrap{
    width:800px;
    height:300px;
    border:1px solid #000;
    }
    #wrap .inner{
    float:left;
    width:150px;
    height:100px;
    overflow:auto;
    }
    #bottom{
    height:200px;
    border:1px solid #00f;
    }
    Code:
    <div id="wrap">
          <div class="inner"></div>
          <div class="inner"></div>
          <div class="inner"></div>
          <div class="inner"></div>
          <div class="inner"></div>
    
    </div>
    <div id="bottom"></div>
    (You can modify the dimensions, hope this helps)
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    New Coder
    Join Date
    Jul 2006
    Posts
    39
    Thanks
    7
    Thanked 0 Times in 0 Posts
    yea thanks, it helps somewhat. But I'd prefer to use tables over Javascript. If that's not possible I shall just rely on Javascript.

    So is it not at all possible to fix a td's width so that really long data does not skew everything?

  • #7
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Again, I can only give you leads. I have practically never used tables without css.

    Try this one.

    http://www.webmasterworld.com/forum21/9416.htm

    at least it will keep your post alive.

    Frank

    Code:
    css 
    table { 
    table-layout:fixed 
    width:400px; 
    } 
    td#one { 
    width:25&#37;; 
    border:1px solid red; 
    } 
    td#two { 
    width:75%; 
    border:1px solid blue; 
    } 
    html 
    <table> 
    <tr> 
    <td id="one">one</td> 
    <td id="two">two</td> 
    </tr> 
    </table>
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,859
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by harjanto View Post
    yea thanks, it helps somewhat. But I'd prefer to use tables over Javascript. If that's not possible I shall just rely on Javascript.

    So is it not at all possible to fix a td's width so that really long data does not skew everything?
    How could that be? Tables are html elements used to present tabular data. javascript is a client side scripting language, used to give some enhancements to a document and this works only if the browser supports.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    http://www.dynamicdrive.com/style/bl...height-script/

    abduraooft,
    This was a url that I gave to assist. It may be what he was talking about. He wanted to fix his tables so that excess text did not skew them. I suggested css which has flexible height. This url was to fix the height of a div. or at least that is what I had in mind. A case of the blind leading the blind. I'm still a little hazy of the end result required.
    Frank
    Last edited by effpeetee; 02-24-2008 at 12:24 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • Users who have thanked effpeetee for this post:

    harjanto (02-24-2008)

  • #10
    New Coder
    Join Date
    Jul 2006
    Posts
    39
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Well I found a table solution. It's here: http://www.blakems.com/archives/000077.html

    Thanks for the help anyways guys


  •  

    Posting Permissions

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