Freezing the width of TABLE cells

Scripsit Join Bytes!:

Quote: (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.

Quote: 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.

Quote: 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.

Quote: 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).

Quote: 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.

Quote: 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.

Quote: 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; }

Quote: (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/

Join Bytes! writes:

Quote: 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.

Quote: (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.