Help - Search - Members - Calendar
Full Version: resize table column width to less than the minimum width
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
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.
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
QUOTE(weblogfinder @ Jan 25 2011, 08:22 PM) *

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

QUOTE
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


QUOTE
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
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2018 Invision Power Services, Inc.