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,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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
    •