Freezing the width of TABLE cells

[gentsquash]

(If my question is too much CSS, please point me elsewhere
and I'll post there. My tests have been on Firefox on MacOS,
and I'd settle for just getting this to work there.)

I'm writing a game in javascript (but JS plays little role
in the question) for an algebra class I'll be teaching.
The playing board is a particular <table>, and each cell is
supposed to be, say, 21px wide. Unfortunately, the
cell-widths shrink when the user lessens the width of the
browser-window (the "canvas"?). One can pretend that the
cells have no content; the cell's BGCOLOR is used for the
play of the game.

What I'd prefer, when the user shrinks the canvas, is just
that the board stick off the canvas's righthand side.

I've tried <td width="21px"and
<td style="width: 21px; min-width: 21px;">
unsuccessfully. I've also tried attaching

min-width: <total-width of table>

to various elements, e.g, each <tror <tbodyor <table>, to
no effect. It *did* work when I attached min-width to an
enclosing <div>, but this adversely affected other stuff in
the <div>. In any case, the table-width changes dynamically
with the play of the game, since the number of columns
change. What is supposed to be invariant is cell-width.

(Aside: The page has several nested DIVs and TABLEs, and
these may have affected my tests.)

[Jukka K. Korpela]

Scripsit ge********@gmail.com:

(If my question is too much CSS, please point me elsewhere
and I'll post there.

You are supposed to know or find out where to post. But you're excused
in this case, since the problem can be seen as an HTML problem, even
though the solution is in CSS.

My tests have been on Firefox on MacOS,
and I'd settle for just getting this to work there.)

Oh my. Should I stop then? You apparently have no WWW authoring problem
then. But I'll pretend that I didn't read the above.

The playing board is a particular <table>, and each cell is
supposed to be, say, 21px wide.

Why do you suppose so? For all that you can know, 21px may not be
sufficient for a single character, in the smallest font size that the
user can read.

Unfortunately, the
cell-widths shrink when the user lessens the width of the
browser-window (the "canvas"?).

That may happen. Allocation of widths to columns is known to vary in
browsers, and width settings are often treated just as suggested widths
(which is actually what HTML specs say about them).

One can pretend that the
cells have no content; the cell's BGCOLOR is used for the
play of the game.

That's poor approach. What will happen, for example, when background
colors are not used, due to browser settings or other factors?

Why didn't you post a URL? We can only see that you are hitting your
head on the wall, not what you are trying to accomplish.

What I'd prefer, when the user shrinks the canvas, is just
that the board stick off the canvas's righthand side.

I've tried <td width="21px">

That's incorrect markup. Browsers generally ignore the px part there,
but it's still incorrect. It's not a good idea to do things wrong just
because it does not always crash a page and it isn't much more difficult
that doing things right.

What is supposed to be invariant is cell-width.

If you really wanted the cell to be empty, which is a wrong thing to
want, you could put a transparent single-pixel image there, stretched to
the width of 21 pixels:
<td><img alt="" src="transp.gif" width="21" height="21"></td>

But the real answer is to use simple CSS. For example, use <table
class="board"in markup and a style sheet like

..board { table-layout: fixed; }
..board td { width: 21px; padding: 0; }

(Aside: The page has several nested DIVs and TABLEs, and
these may have affected my tests.)

Surely. And your other problems too. Nested tables are mostly just a
quick way to create problems, rather than solve them.

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

[Ben Bacarisse]

ge********@gmail.com writes:

I'm writing a game in javascript (but JS plays little role
in the question) for an algebra class I'll be teaching.
The playing board is a particular <table>, and each cell is
supposed to be, say, 21px wide. Unfortunately, the
cell-widths shrink when the user lessens the width of the
browser-window (the "canvas"?). One can pretend that the
cells have no content; the cell's BGCOLOR is used for the
play of the game.

What I'd prefer, when the user shrinks the canvas, is just
that the board stick off the canvas's righthand side.

I've tried <td width="21px"and
<td style="width: 21px; min-width: 21px;">
unsuccessfully. I've also tried attaching

min-width: <total-width of table>

to various elements, e.g, each <tror <tbodyor <table>, to
no effect. It *did* work when I attached min-width to an
enclosing <div>, but this adversely affected other stuff in
the <div>. In any case, the table-width changes dynamically
with the play of the game, since the number of columns
change. What is supposed to be invariant is cell-width.

Why not put an image in the cell? That will stop it from shrinking in
those browsers that prefer to do that. It can be small an invisible.

(Aside: The page has several nested DIVs and TABLEs, and
these may have affected my tests.)

and these may affect the solution so, as always, posting an example
URL is the best way to get good advice.

--
Ben.