Scrollable Table searching for textwrap in tablecell

[Razor]

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;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang0:0</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang0:1</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang0:2</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang0:3</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang0:4</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang0:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang1:0</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang1:1</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang1:2</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang1:3</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang1:4</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang1:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang2:0</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang2:1</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang2:2</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang2:3</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang2:4</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang2:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang3:0</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang3:1</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang3:2</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang3:3</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang3:4</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang3:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang4:0</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang4:1</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang4:2</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang4:3</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang4:4</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang4:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang5:0</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang5:1</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang5:2</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang5:3</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang5:4</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang5:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang6:0</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang6:1</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang6:2</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang6:3</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang6:4</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang6:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang7:0</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang7:1</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang7:2</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang7:3</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang7:4</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang7:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang8:0</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang8:1</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang8:2</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang8:3</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang8:4</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang8:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang9:0</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang9:1</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang9:2</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang9:3</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang9:4</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang9:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang10:0</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang10:1</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang10:2</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang10:3</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang10:4</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang10:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang11:0</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang11:1</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang11:2</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang11:3</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang11:4</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang11:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang12:0</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang12:1</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang12:2</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang12:3</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang12:4</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang12:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang13:0</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang13:1</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang13:2</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang13:3</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang13:4</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang13:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang14:0</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang14:1</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang14:2</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang14:3</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang14:4</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang14:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang15:0</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang15:1</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang15:2</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang15:3</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang15:4</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang15:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang16:0</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang16:1</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang16:2</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang16:3</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang16:4</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang16:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang17:0</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang17:1</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang17:2</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang17:3</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang17:4</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang17:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang18:0</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang18:1</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang18:2</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang18:3</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang18:4</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang18:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang19:0</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang19:1</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang19:2</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang19:3</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang19:4</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang19:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang20:0</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang20:1</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang20:2</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang20:3</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang20:4</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang20:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang21:0</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang21:1</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang21:2</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang21:3</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang21:4</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang21:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang22:0</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang22:1</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang22:2</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang22:3</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang22:4</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang22:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang23:0</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang23:1</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang23:2</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang23:3</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang23:4</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang23:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang24:0</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang24:1</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang24:2</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang24:3</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang24:4</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang24:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang25:0</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang25:1</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang25:2</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang25:3</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang25:4</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang25:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang26:0</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang26:1</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang26:2</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang26:3</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang26:4</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang26:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang27:0</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang27:1</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang27:2</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang27:3</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang27:4</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang27:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang28:0</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang28:1</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang28:2</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang28:3</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang28:4</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang28:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang29:0</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang29:1</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang29:2</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang29:3</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang29:4</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang29:5</td>
</tr><tr>
<td style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang30:0</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang30:1</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang30:2</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang30:3</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang30:4</td><td
style="width:150px;">TestlangTestlangTestlangTestlangTestlangTestlangTestlang30:5</td>
</tr>
</table></div>

 

[brucie]

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

 

[Razor]

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

 

[brucie]

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.

 

[brucie]

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.

 

[Razor]

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

 

[Mark Parnell]

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.

 

[Razor]

Get your script to insert spaces every n characters.

Ok thats possible but looks not very well.

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