Scrollable Table searching for textwrap in tablecell

Hello NG,
Beneath you find a scrollable table with a Long text in the tablecell.
Why to hell dont wrap the text in the tablecell??
Has anyone an idea? I'm searching now over two months for this
problem!
Greetz
Martin


<table border="0">
<tr style="WIDTH:740px;">
<td style="width:150px;">Head_0</td><td
style="width:150px;">Head_1</td><td
style="width:150px;">Head_2</td><td
style="width:150px;">Head_3</td><td
style="width:150px;">Head_4</td><td style="width:150px;">Head_5</td>
</tr>
</table><div style="HEIGHT:150px;WIDTH:767px;POSITION:absolute; OVERFLOW:auto;"><table
border="0">
<tr>
<td style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang0:0</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang0:1</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang0:2</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang0:3</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang0:4</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang0:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang1:0</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang1:1</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang1:2</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang1:3</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang1:4</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang1:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang2:0</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang2:1</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang2:2</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang2:3</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang2:4</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang2:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang3:0</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang3:1</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang3:2</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang3:3</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang3:4</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang3:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang4:0</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang4:1</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang4:2</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang4:3</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang4:4</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang4:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang5:0</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang5:1</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang5:2</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang5:3</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang5:4</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang5:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang6:0</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang6:1</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang6:2</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang6:3</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang6:4</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang6:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang7:0</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang7:1</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang7:2</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang7:3</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang7:4</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang7:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang8:0</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang8:1</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang8:2</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang8:3</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang8:4</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang8:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang9:0</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang9:1</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang9:2</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang9:3</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang9:4</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang9:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang10:0</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang10:1</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang10:2</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang10:3</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang10:4</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang10:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang11:0</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang11:1</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang11:2</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang11:3</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang11:4</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang11:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang12:0</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang12:1</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang12:2</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang12:3</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang12:4</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang12:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang13:0</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang13:1</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang13:2</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang13:3</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang13:4</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang13:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang14:0</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang14:1</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang14:2</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang14:3</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang14:4</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang14:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang15:0</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang15:1</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang15:2</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang15:3</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang15:4</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang15:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang16:0</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang16:1</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang16:2</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang16:3</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang16:4</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang16:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang17:0</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang17:1</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang17:2</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang17:3</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang17:4</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang17:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang18:0</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang18:1</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang18:2</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang18:3</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang18:4</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang18:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang19:0</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang19:1</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang19:2</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang19:3</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang19:4</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang19:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang20:0</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang20:1</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang20:2</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang20:3</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang20:4</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang20:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang21:0</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang21:1</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang21:2</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang21:3</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang21:4</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang21:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang22:0</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang22:1</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang22:2</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang22:3</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang22:4</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang22:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang23:0</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang23:1</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang23:2</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang23:3</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang23:4</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang23:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang24:0</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang24:1</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang24:2</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang24:3</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang24:4</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang24:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang25:0</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang25:1</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang25:2</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang25:3</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang25:4</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang25:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang26:0</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang26:1</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang26:2</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang26:3</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang26:4</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang26:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang27:0</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang27:1</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang27:2</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang27:3</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang27:4</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang27:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang28:0</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang28:1</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang28:2</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang28:3</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang28:4</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang28:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang29:0</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang29:1</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang29:2</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang29:3</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang29:4</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang29:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang30:0</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang30:1</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang30:2</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang30:3</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang30:4</td><td
style="width:150px;">TestlangTestlangTestlangTestl angTestlangTestlangTestlang30:5</td>
</tr>
</table></div>

Razor

in post: <news:. com>
(Razor) said:

> Beneath you find a scrollable table with a Long text in the tablecell.

perhaps next time you could supply a link to the document. it makes it
easier for people to help you.

> Why to hell dont wrap the text in the tablecell??

you have no spaces between the words

--
b r u c i e

brucie <****@bruciesusenetshit.info> wrote
> perhaps next time you could supply a link to the document. it makes it
> easier for people to help you.
Ok thats right!
> you have no spaces between the words
Yes but I get my data from a database.
I want to force him to ever break when the string is longer than the cellwidth.
Perhaps another idea?

Martin

in post: <news:. com>
(Razor) said:

>> you have no spaces between the words

> Yes but I get my data from a database.

why have you got text in your db without any spaces? it must make it
hard to read.

> I want to force

you cant force, you can only suggest. once your goodies have left your
server you have no control.

> him to ever break when the string is longer than the cellwidth.

even if you know the cell width you cant know how many characters would
fit in the cell before wrapping was required.

> Perhaps another idea?

put spaces in the text.


--
b r u c i e

in post: <news:. com>
(Razor) said:

>> you have no spaces between the words

> Yes but I get my data from a database.
> I want to force him to ever break when the string is longer than the cellwidth.
> Perhaps another idea?

could i assume the text are links and thats why there are no spaces? if
so use scripting to trim the link text thats being displayed to 30-40
characters or whatever. use the full text for the href.

example:
<a href="http://www.example.com/a/very/long/link/blah.ext">www.example.com/a/very...</a>

you would have to decide what would be the most appropriate part of the
link to display for the visitor or even rethink if the actual link text
should be used or if a sentence describing the link would be more
appropriate.


--
b r u c i e

brucie <****@bruciesusenetshit.info> wrote
> why have you got text in your db without any spaces? it must make it
> hard to read.
The content are serialnumbers and other very long words. When I give a
cell of 50px and only one word is longer my complete tabledesign is
confused.

> even if you know the cell width you cant know how many characters would
> fit in the cell before wrapping was required.
OK, but I can't think that I'm the first one who have this problem.
There must be a solution.
If there is no way I take in every cell a div with overflow=auto
option.
Greetz

Martin

On 7 Apr 2004 07:29:47 -0700, (Razor) declared in
alt.html:

> The content are serialnumbers and other very long words. When I give a
> cell of 50px and only one word is longer my complete tabledesign is
> confused.

Then perhaps it shouldn't be in a table? Is it actually tabular data?

> OK, but I can't think that I'm the first one who have this problem.

No, it's been asked here before (did you check the archives?)

> There must be a solution.

Get your script to insert spaces every n characters.

> If there is no way I take in every cell a div with overflow=auto
> option.

Ouch.

--
Mark Parnell
http://www.clarkecomputers.com.au

Mark Parnell <> wrote


> Get your script to insert spaces every n characters.
Ok thats possible but looks not very well.

>
> > If there is no way I take in every cell a div with overflow=auto
> > option.
>
> Ouch.

Ok thats my opinion too. But I find one way:
Tata:
In Netscape6 and in IE 5.x and higher there is an attribute
style="table-layout:fixed" from CSS2.0
and this works!!
The only problem is, that the ending of some words is hidden and I can
not give the cell a height because than is too much hidden
I have only tested it in IE6!!
but all my Users have this one so it is not a problem for me.
The positive side effect is that the browser has not to recalculate
all cells after print.
Thanks for your help and have a nice day
Martin