Forcing table width

[John Wood]

I've noticed that a table cell width is ignored if the content contains
words that (themselves) are wider than the specified width. The table just
grows width-wise.

Is there any way to stop this?

I'm trying to get my tables to fit 640px wide, but the content frequently
makes them bleed off the page.

TIA,
John

 

[The Doormouse]

Is there any way to stop this?

CSS might do it.

The Doormouse

 

[Barry Pearson]

I've noticed that a table cell width is ignored if the content
contains words that (themselves) are wider than the specified width.
The table just grows width-wise.

Is there any way to stop this?

I'm trying to get my tables to fit 640px wide, but the content
frequently makes them bleed off the page.

Wrap the content of those cells into a <div>, then control the <div> via CSS.

<td>
<div class="something">
stuff goes here
</div>
</td>

div.something {
width: 200px;
height: 300px;
overflow: auto;
}

Tables are wonderfully flexible, adapting to the user's environment such as
text size & viewport width. This is fully within the spirit of the web, with
fluid design conforming to the needs and preferences of the users.

But sometimes this is a problem for authors. So don't try to control the
tables directly. You can't. Control their content instead. Then the table will
adapt to the controlled content. If you wrap the content in a <div>, and
control the <div>, the table will adapt, and the <div> will shield the table
from its contents.

In the above CSS, the { overflow: auto } will give scrollbars *if needed*.
Alternatively, you could use { overflow: hidden } and hide the extra stuff.

 

[David Dorward]

Why not reduce the content then?

Wrap the content of those cells into a <div>, then control the <div> via
CSS.

<td>
<div class="something">
stuff goes here
</div>
</td>

div.something {
width: 200px;
height: 300px;
overflow: auto;
}

Why not apply the CSS directly to the table data cell?

 

[Barry Pearson]

Why not reduce the content then?

The size of the content is often not under the control of the author. Tables
are wonderfully flexible, adapting to the user's environment such as text size
& viewport width. This is fully within the spirit of the web, with fluid
design conforming to the needs and preferences of the users.

But the layout concept may want control of the width and/or height. At least
for some cells.

Why not apply the CSS directly to the table data cell?

See above. It doesn't work. Tables typically override CSS controls. Tables
adapt to their content. So control their content instead.

Experiment. Compare controlling table cells with controlling the contents of
tables cells. The difference is amazing.

 

[John Wood]

Actually controlling the content in this case is difficult. The table has
alternating spanning column rows containing a lot of text. If any of the
words are unable to wrap correctly, the table resizes... I could look
through all the text and put a maximum width on each word, but the overhead
of doing that may be too large. I'd rather put the processing overhead on
the client.

The div solution does work, but does slow down with larger tables... and I
have yet to see how it works in browsers such as Safari.

Thanks all for your suggestions!

 

[Mark Parnell]

I'm trying to get my tables to fit 640px wide, but the content frequently
makes them bleed off the page.

"Doctor, it hurts when I do this."
"Stop doing that."

http://www.allmyfaqs.com/faq.pl?AnySizeDesign
http://www.allmyfaqs.com/faq.pl?Tableless_layouts