resize table column width to less than the minimum width Options

[weblogfinder]

Hi,

I have a table as below:

<table>
<tr>
<td>asdf</td>
<td>defg</td>
</tr>
</table>

How can i reduce the width of each column less than length of "asdf" or "defg"

i.e

if the table displays as
asdf|defg

I would like to customize the table display as:
as|defg
df|


Can any one please let me know how can i proceed with this and need any further info.

[Darin McGrew]

AFAIK, you can't do that without splitting the word that you want to wrap.

[pandy]

Especially not with a table.

[Frederiek]

You could set an unvisible hyphen sign (& shy; [edit: had to add the spaces or nothing showed up]) everywhere you want the text to be able to wrap. That's a lot of work, so you might use a script for that.

This post has been edited by Frederiek: Jan 25 2011, 02:31 AM

[pandy]

Soft hyphen doesn't work with tables. They still expand, at least in the browsers I've tried.

[Christian J]

I could make

CODE

&shy;

work in all but Firefox.

But the WBR element (included in HTML5) works in all but Opera and doesn't create a hyphen.

[pandy]

Can't get them all, eh? Seems like improvements have been made anyhow.

[weblogfinder]

So you mean we cannot do with regular table/td options available?.


How can i use this "shy" in my code?.

Also, what are the other options, apart from the js shown above (i couldn't make it work with my html file.)

[Christian J]

So you mean we cannot do with regular table/td options available?.

I don't think it's a table issue. Text strings don't normally break except between certain characters: http://www.cs.tut.fi/~jkorpela/html/nobr.html

How can i use this "shy" in my code?.

Since Firefox apparently doesn't support &shy in tables (do you have to use a table?) I'd use WBR instead:

CODE

a<wbr>s<wbr>d<wbr>f

Also, what are the other options, apart from the js shown above (i couldn't make it work with my html file.)

Options for what, adding the "breakable code" in text? Besides JS you might do it with a server-side script (e.g. PHP).

[Frederiek]

I just found a way to do this with CSS3's "word-wrap: break-word;", see http://robertnyman.com/css3/word-wrap/word-wrap.html .

[Christian J]

That used to be a proprietary MSIE property. Seems all the newest browser versions support it now (not Firefox2 or Opera9 though).

[Barthal]

Technically you could if you started to go deep into nesting, but it's not worth the trouble