How do I keep apparent table width independent of window size?

I am making an HTML table. It has a lot of columns with fixed width
(55 pixels). If I view it on full-screen IE window, the table fits on
the screen and looks just as I want it to look. When I make the window
smaller than the table, I expect horizontal scroll bar to appear.
Instead each column shrinks; a cell which had:

word1 word2
word3

becomes:

word1
word2
word3

thus distorting the table and making it look ugly. Only when I make
the window so small that columns can not shrink any more (each is the
longest word wide), does horizontal scroll bar appear.

How can I avoid this -- keep the columns same width regardless of
window size? I already tried giving the table a fixed width -- it does
not solve the problem, if anything makes it worse.

Or use a 55px wide clear gif and don't tell anyone.

I was thinking of doing just that -- in the unused bottom row.

In article
<9b45905a-7e68-4b3c-a39f-41cef459ed20 (AT) b64g2000hsa (DOT) googlegroups.com>,
ilya2 (AT) rcn (DOT) com wrote:

I am making an HTML table. It has a lot of columns with fixed width
(55 pixels). If I view it on full-screen IE window, the table fits on
the screen and looks just as I want it to look. When I make the window
smaller than the table, I expect horizontal scroll bar to appear.
Instead each column shrinks; a cell which had:

word1 word2
word3

becomes:

word1
word2
word3

thus distorting the table and making it look ugly. Only when I make
the window so small that columns can not shrink any more (each is the
longest word wide), does horizontal scroll bar appear.

How can I avoid this -- keep the columns same width regardless of
window size? I already tried giving the table a fixed width -- it does
not solve the problem, if anything makes it worse.

If you fix width all the cells and all the same and in pixels, you do
run into all sorts of problems; what would you want to happen, for
example, if the user upped his text size, where is the text to go if it
cannot fit?

Everything depends on the details of your project, perhaps a url might
help. But perhaps this will give you a thought to play with: Don't
bother with giving the table itself a width, try min-width in em for
either all the cells or selected cells (by classing them is most
reliable). Choose a size to fit the point below which text will wrap to
your displeasure:

td {border: 1px solid; min-width: 20em;}

In IE 6 this will be no good, but it should be ok for most other
browsers.

Or you could be variously brutal and have at least one cell in a col
that is giving you wrap troubles that is an unbroken made up word of a
length to your requirements, the whole col will be forced to accommodate
it. Thus if you have "123456789" in one cell in a col, then other cells
with "1 2" and "1 2 3" and "1 2 3 4" will not wrap the numbers because
"123456789" is holding the col open.

Or use a 55px wide clear gif and don't tell anyone.

--
dorayme

On 2008-03-31, dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

In article
9b45905a-7e68-4b3c-a39f-41cef459ed20...oglegroups.com>,
ilya2 (AT) rcn (DOT) com wrote:

I am making an HTML table. It has a lot of columns with fixed width
(55 pixels). If I view it on full-screen IE window, the table fits on
the screen and looks just as I want it to look. When I make the window
smaller than the table, I expect horizontal scroll bar to appear.
Instead each column shrinks; a cell which had:

word1 word2
word3

becomes:

word1
word2
word3

thus distorting the table and making it look ugly. Only when I make
the window so small that columns can not shrink any more (each is the
longest word wide), does horizontal scroll bar appear.

How can I avoid this -- keep the columns same width regardless of
window size? I already tried giving the table a fixed width -- it does
not solve the problem, if anything makes it worse.

If you fix width all the cells and all the same and in pixels, you do
run into all sorts of problems; what would you want to happen, for
example, if the user upped his text size, where is the text to go if it
cannot fit?

Unless you use table-layout: fixed, it will fit, no matter how narrow
the cells are made.

Everything depends on the details of your project, perhaps a url might
help. But perhaps this will give you a thought to play with: Don't
bother with giving the table itself a width, try min-width in em for
either all the cells or selected cells (by classing them is most
reliable). Choose a size to fit the point below which text will wrap to
your displeasure:

td {border: 1px solid; min-width: 20em;}

Width on table cells kind of means minimum width anyway.

[...]

Or use a 55px wide clear gif and don't tell anyone.

I'm surprised setting a width on the whole table didn't work as intended
but then the OP is talking about IE where anything goes.

Scripsit ilya2 (AT) rcn (DOT) com:

I am making an HTML table. It has a lot of columns with fixed width
(55 pixels).

Why? Do they all contain images? And how many lots of such columns do
you expect to fit into a fairly reasonably 400 or 500 pixels wide
window?

On the other hand, for all that you can know, 55 pixels might not be
enough for a single character.

Post the URL, and maybe someone can suggest a way to redesign the table.
It probably needs a redesign, or more.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

ilya2 (AT) rcn (DOT) com wrote:

I am making an HTML table. It has a lot of columns with fixed width
(55 pixels). If I view it on full-screen IE window, the table fits on
the screen and looks just as I want it to look. When I make the window
smaller than the table, I expect horizontal scroll bar to appear.
Instead each column shrinks; a cell which had:

word1 word2
word3

becomes:

word1
word2
word3

You can use

<td nowrap>word1 word2<br>word3</td>

or

<td><nobr>word1 word2<br>word3</nobr></td>

--
Petr Vileta, Czech republic
(My server rejects all messages from Yahoo and Hotmail. Send me your
mail from another non-spammer site please.)

Please reply to <petr AT practisoft DOT cz>

In article <slrnfv2jve.hn7.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:

On 2008-03-31, dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

Everything depends on the details of your project, perhaps a url might
help. But perhaps this will give you a thought to play with: Don't
bother with giving the table itself a width, try min-width in em for
either all the cells or selected cells (by classing them is most
reliable). Choose a size to fit the point below which text will wrap to
your displeasure:

td {border: 1px solid; min-width: 20em;}

Width on table cells kind of means minimum width anyway.

[...]

Safari 2 is different to Firefox in the effects.

A table with td {border: 1px solid; width: 200px;} behaves differently
in different browsers to td {border: 1px solid; min-width: 200px;}

Or use a 55px wide clear gif and don't tell anyone.

I'm surprised setting a width on the whole table didn't work as intended
but then the OP is talking about IE where anything goes.

I am not sure he tried this? I know I did not (slaps forehead!) but it
might have been 3 or 4am in the morning here! Not being able to sleep
might not *quite* mean I am awake.

--
dorayme

On Mar 31, 5:31*pm, "Jukka K. Korpela" <jkorp... (AT) cs (DOT) tut.fi> wrote:

Scripsit il... (AT) rcn (DOT) com:

I am making an HTML table. It has a lot of columns with fixed width
(55 pixels).

Why? Do they all contain images? And how many lots of such columns do
you expect to fit into a fairly reasonably 400 or 500 pixels wide
window?

I do not expect it to fit on a 400 to 500 pixels wide window.

On the other hand, for all that you can know, 55 pixels might not be
enough for a single character.

Post the URL, and maybe someone can suggest a way to redesign the table.
It probably needs a redesign, or more.

Here it is:

http://users.rcn.com/ilya187/TimeGraph.html

On 2008-04-01, dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

In article <slrnfv2jve.hn7.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:

On 2008-03-31, dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

Everything depends on the details of your project, perhaps a url might
help. But perhaps this will give you a thought to play with: Don't
bother with giving the table itself a width, try min-width in em for
either all the cells or selected cells (by classing them is most
reliable). Choose a size to fit the point below which text will wrap to
your displeasure:

td {border: 1px solid; min-width: 20em;}

Width on table cells kind of means minimum width anyway.

[...]

Safari 2 is different to Firefox in the effects.

A table with td {border: 1px solid; width: 200px;} behaves differently
in different browsers to td {border: 1px solid; min-width: 200px;}

Yes, width and min-width are different.

Firefox seems to think that min-width doesn't apply to table cells at
all from what I can see.

But width on a table-cell is a minimum width (in the ordinary language
sense) because you only get the width you asked for if it's >= the
minimum content width.

In article <slrnfv5906.lu.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:

On 2008-04-01, dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:
In article <slrnfv2jve.hn7.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:

On 2008-03-31, dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:
...
td {border: 1px solid; min-width: 20em;}

Width on table cells kind of means minimum width anyway.

[...]

Safari 2 is different to Firefox in the effects.

A table with td {border: 1px solid; width: 200px;} behaves differently
in different browsers to td {border: 1px solid; min-width: 200px;}

Yes, width and min-width are different.

Firefox seems to think that min-width doesn't apply to table cells at
all from what I can see.

True, with FF, one can save one's breath for all the notice it takes of
this in a table.

--
dorayme