forcing tables to stick to the right size

[musicales]

I have user uploaded content which can splurge over and make the screen scroll a hundred miles to the right. Is the any way to force a table to stick to its designated pixel size in such moments
Thanks

[brotherhood of LAN]

You can use percentages to define widths.....I assume you have been using a WYSIWYG editor.....maybe Frontpage? Most people will use %'s as a default from what I have read.

[musicales]

But %'s will still stretch to more than screen width if the line is too long. What I need is something like 'wrap' but I don't think it exists, only nowrap exists as far as i know.

[Key_Master]

Try this:

table {
white-space: nowrap;
}

[Gene]

Unfortunately, from what I've read, the width attribute merely specifies a minimum size. I don't think you can solve this issue with standard HTML.

Perhaps CSS is needed to tackle the problem. Sorry, I'm not keen on CSS.

--Gene

[tedster]

This is a challenging area - you will sometimes see it happen on this board, and when it shows up we fix each case by hand. Browsers NEED the freedom to stretch the dimensions of tables, or else you could write code that was impossible for them to render.

If this happens often for you, I think you may need to do some server-side processing before the uploads are inserted into the page code. I really doubt there is a client side answer.

[musicales]

thanks tedster that makes sense

[MCookie]

Musicales, maybe the "overflow" property can help?

<div style="width:400; height:400; overflow:scroll;">A scrollbar will always be visible in this div.</div>

or

<div style="width:400; height:400; overflow:auto;">A scrollbar will automatically appear if the contents is too wide or high.</div>

or

<div style="width:400;height:400; overflow:hidden;">Too wide or too high contents will simply be cut off.</div>

[musicales]

MCookie - that's a good one, haven't seen that before. The only thing is I don't want to cut the content off, just force it on to the next line. Still, that's an interesting tag to learn about, thanks.

[msr986]

musicales,

Make sure your <td>'s all have a fixed width measurement in pixels.

This should make your content wrap.

If the cell content is not wrapable (such as an image), and it is wider than the <td> width, the browser will stretch the table.

[rewboss]

As has been mentioned, table and td widths are recommended minimum widths only.

Lines will only break at a space (but not, of course, a non-breaking space) or, in some browsers, at a hyphen. (Of course <br /> tags will force line breaks.) If, however, the text is in a <nobr> (which won't validate) environment, it will only break at a <wbr /> tag (again, not standard HTML). These tags are supported by many popular browsers. <pre> will cause the line to break only where a newline character or <br /> is encountered in the source code. You can use CSS to force similar behaviour.

There is no way of automatically forcing the browser to break lines anywhere else. And table cells will always expand wherever necessary; this is what they are supposed to do.

[musicales]

thanks rewboss -what is the <wbr /> tag?

[rewboss]

A special tag to permit a line-break inside a <nobr> if necessary. (I think it was <wbr />, it may have been something similar, but I've never used it. It was a silly tag, anyway.)

[joshie76]

<table style="table-layout:fixed">

This should force the table size, but usually just hides any overflow, not forcing it to wrap. Tricky one.

Once or twice in the past, (with a couple of applications, not websites) this has been a necessary evil, but adding a title to the <td> that is the same as it's content can help (a little).

[martinibuster]

Hi everybody,
What about nesting the table? Correct me if I'm wrong but my understanding is that if you have a table that you need to throw content into (imagine a magazine template with boxes for where the article goes), then you use a nested table, so that the the table with the content cannot expand beyond the confines of the table that is holding it. Same goes for the nav bar on the left, etc.

I think that's how media sites that use a Content Management System cope with constantly updated content. You can download and investigate such sites, say like dslreports.com, etc and fire it up in dreamweaver etc to see how they're put together. Makes for interesting study.

"Yawn" I've got to get back to bed, now...

[shanz]

If you have a table that combines percentage widths and pixel widths then this can cause the page to display incorrectly. Ex the table with width 67% but a row width of 300px.

Try and ensure you use one or the other.

[rewboss]

Correct me if I'm wrong

Certainly. If a table is too narrow to accommodate a nested table, it too will expand.

It is even possible (I know, I've done it myself) to define a table in such a way that one of the cells will extend beyond the table. Rather like the Tardis, which is bigger on the inside than on the outside, the table cell ended up wider than the table.

It was very strange, but I didn't do it deliberately. I certainly don't recommend trying it at home. It played merry hell with the rest of the page and it took me nearly an hour to find the mistake.

[musicales]

My current feeling after all these helpful and interesting replies is that some pre-processing is needed on the uploaded material. I guess if I find a span of text with no carriage returns or line breaks for more than x characters I should find a space half way through and stick a line break in. Anyone forsee any problem with that ? ( apart from about 5 hours of fiddly coding)

[rewboss]

Well, probably the reason the line isn't breaking is because there is no space in it, unless you've used <pre> or nowrap or the CSS equivalents.

If we're talking bulleting boards here, it usually happens when some member posts something cooooooollllll! ...you know what I mean. An admin or mod could then just edit the post or something.

[ann]

Not sure I am grasping the problem here but I have had success with wrapping inside table cells by using the lowly little center tag on the content.
It causes the content to wrap at the cells edge.

Hope that helps.

[musicales]

OK I did finally solve this :

STYLE="word-wrap:break-word; width:800; left:0"
sets the width to a max of 800 even if this means cutting a very long word in two.

In answer to some earlier questions the main reason I had this problem at all was indeed the <pre> tag.

Thanks all