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

[harjanto]

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

[effpeetee]

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

[harjanto]

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.

[effpeetee]

Originally Posted by harjanto

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

[abduraooft]

#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;
}

<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)

[harjanto]

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?

[effpeetee]

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

css 
table { 
table-layout:fixed 
width:400px; 
} 
td#one { 
width:25%; 
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>

[abduraooft]

Originally Posted by harjanto

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.

[effpeetee]

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

[harjanto]

Well I found a table solution. It's here: http://www.blakems.com/archives/000077.html

Thanks for the help anyways guys