...

View Full Version : How to prevent long text in a TD from skewing the entire table?



harjanto
02-24-2008, 09:43 AM
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
02-24-2008, 11:16 AM
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
02-24-2008, 11:44 AM
http://img90.imageshack.us/img90/8851/templatecj5.th.png (http://img90.imageshack.us/my.php?image=templatecj5.png)

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
02-24-2008, 11:56 AM
http://img90.imageshack.us/img90/8851/templatecj5.th.png (http://img90.imageshack.us/my.php?image=templatecj5.png)

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/blog/entry/css-equal-columns-height-script/
http://www.projectseven.com/tutorials/CSS/pvii_columns/


will this help?

Frank

abduraooft
02-24-2008, 12:29 PM
#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
02-24-2008, 12:30 PM
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
02-24-2008, 12:44 PM
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&#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>

abduraooft
02-24-2008, 12:48 PM
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
02-24-2008, 01:19 PM
http://www.dynamicdrive.com/style/blog/entry/css-equal-columns-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
02-24-2008, 11:46 PM
Well I found a table solution. It's here: http://www.blakems.com/archives/000077.html

Thanks for the help anyways guys



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum